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

      效果如图:

  • 相关阅读:
    [原]将Oracle 中的blob导出到文件中
    [原]unique index和non unique index的区别
    lsattr/chattr
    [原]说不清楚是Oracle的Bug还是TSM的Bug
    [摘]Oracle限制某个数据库帐号只能在特定机器上连入数据库
    [原]复制Oracle Home所需要注意的几个问题
    [原]Oracle Data Guard 折腾记(二)
    配置vsFTP的虚拟用户认证
    [原]给Oracle 11g Interval分区进行重命名
    [摘]如何抓住蝴蝶效应中的那只蝴蝶
  • 原文地址:https://www.cnblogs.com/bhmmlxieliming/p/6366440.html
Copyright © 2011-2022 走看看