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

      效果如图:

  • 相关阅读:
    leetcode203
    leetcode88
    leetcode219
    leetcode225
    2018-12-25-C#-使用转换语义版本号
    2018-12-25-C#-使用转换语义版本号
    2018-10-15-Winforms-可能遇到的-1000-个问题
    2018-10-15-Winforms-可能遇到的-1000-个问题
    2018-8-10-UWP-WPF-解决-xaml-设计显示异常
    2018-8-10-UWP-WPF-解决-xaml-设计显示异常
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6366440.html
Copyright © 2020-2023  润新知