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;">

      效果如图:

  • 相关阅读:
    LockSupport的用法及原理
    ReentrantReadWriteLock读写锁详解
    Java的CountDownLatch和CyclicBarrier的理解和区别
    AbstractQueuedSynchronizer超详细原理解析
    走进JVM
    【题解】Hanoi塔问题
    【题解】二的幂次方
    【题解】桐桐的递归函数
    【题解】数的计数
    【题解】极品飞车
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6366440.html
Copyright © 2011-2022 走看看