zoukankan      html  css  js  c++  java
  • bootstarp 模态框大小尺寸的控制

    默认:

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
                </div>
                <div class="modal-body">按下 ESC 按钮退出。</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script>
    $(function() {
        $('#myModal').modal({
            keyboard: true
        })
    });
    </script>
    

      效果如图:

      变大:

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
                </div>
                <div class="modal-body">按下 ESC 按钮退出。</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script>
    $(function() {
        $('#myModal').modal({
            keyboard: true
        })
    });
    </script>
    

      效果如图:

     变小:

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
                </div>
                <div class="modal-body">按下 ESC 按钮退出。</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script>
    $(function() {
        $('#myModal').modal({
            keyboard: true
        })
    });
    </script>
    

      效果如图:

      当然  也可以调节<div>的宽度 width 高度 height

    <div class="modal-content" style="800px; height:500px;">

      效果如图:

  • 相关阅读:
    扩展Image组件,属性不显示
    unity ugui如何用scrollview展示多个不同的3d物体
    Unity 给模型添加子物体,跟随父物体移动和旋转时不同步问题
    Unity3D性能优化
    Vs2017安装不上个问题,愁了好久
    Time.timeScale 暂停游戏
    unity.3d 打开monodevelop无法调用命名空间问题
    Unity.3D中,两个界面各自脚本中的变量如何调用
    * 笔记标题及标签整体说明+md总结
    & 文件透传整理
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6366440.html
Copyright © 2011-2022 走看看