1、普通模态框

  1. <div class="container">
  2.     <div class="row mt-5">
  3.         <div class="col">
  4.             <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>
  5.         </div>
  6.     </div>
  7. </div>
  8. <div class="modal fade" id="modal1">        <!-- class应该与data-toggle一样 -->
  9.     <div class="modal-dialog"><!-- 模态框位置 -->
  10.         <div class="modal-content"><!-- 模态框长相：分三部分 -->
  11.             <div class="modal-header">
  12.                 <h5 class="modal-title">标题</h5>
  13.                 <button class="close" data-dismiss="modal">  <!-- data-dismiss="modal"：js交互功能 -->
  14.                     <span>&times;</span>
  15.                 </button>
  16.             </div>
  17.             <div class="modal-body"> <!-- 长内容：模态框有滚动条处理 -->
  18.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  19.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  21.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  23.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  25.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  27.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  29.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  31.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  33.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  35.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  37.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  39.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  41.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  43.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  45.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  47.                     Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  49.                     Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  51.                     Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
  52.             </div>
  53.             <div class="modal-footer">
  54.                 <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
  55.                 <button class="btn btn-primary">保存</button>
  56.             </div>
  57.         </div>
  58.     </div>
  59. </div>

2、垂直居中的模态框

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <button class="btn btn-secondary" data-toggle="modal" data-target="#modal2">垂直居中的模态框</button>
        </div>
    </div>
</div>
    <!-- 垂直居中的模态框 -->
    <div class="modal fade" id="modal2">
        <div class="modal-dialog modal-dialog-centered">    <!-- modal-dialog-centered这个class要加在这里 -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        垂直居中的模态框
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

3、使用栅格系统

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <button class="btn btn-danger" data-toggle="modal" data-target="#modal3">包含栅格系统的模态框</button>
        </div>
    </div>
</div>
<!-- 使用栅格系统 -->
<div class="modal fade" id="modal3">
    <div class="modal-dialog modal-dialog-centered">    <!-- modal-dialog-centered这个class要加在这里 -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标题</h5>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">  <!-- container-fluid：设置百分之百的尺寸 -->
                    <div class="row">
                        <div class="col-md-4 bg-info border">第1列</div>
                        <div class="col-md-4 bg-info border">第2列</div>
                        <div class="col-md-4 bg-info border">第3列</div>
                        <div class="col-md-12 bg-info border">第4列</div>
                    </div>
                    <div class="row">
                        <div class="col bg-info border">第1列</div>
                        <div class="col bg-info border">第2列</div>
                        <div class="col bg-info border">第3列</div>
                        <div class="col bg-info border">第4列</div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 bg-info">第1列</div>
                        <div class="col-md-4 bg-info ml-auto">第2列</div> <!-- ml-auto：让左边有间距 -->
                    </div>
                    <div class="row mt-3">
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

4、模态框相同内容不同

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="kaivon">模态框相同内容不同</button>
            <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="陈学辉">模态框相同内容不同</button>
            <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="吃瓜群众">模态框相同内容不同</button>
        <!-- data-whatever：传递数据 -->
        </div>
    </div>
</div>
    <!-- 模态框相同内容不同：引入数据需要使用js -->
    <div class="modal fade" id="modal4">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#">  <!-- 用到表单 -->
                        <div class="form-group">
                            <label for="username" class="col-form-label">用户名：</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-form-label">评论：</label>
                            <textarea class="form-control" id="comment"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
<script>
    $('#modal4').on('show.bs.modal',function(ev){
        var value=$(ev.relatedTarget).data('whatever');
        /*
            1、$(ev.relatedTarget)   这个值为点击的那个button
            2、.data('whatever') 这个是获取data-开关的属性的值
         */
        $(this).find('.modal-title').text('新评论来自于：'+value);
        $(this).find('.modal-body input').val(value);
    });
</script>

5、尺寸大小

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <button class="btn btn-info" data-toggle="modal" data-target="#modal5">超大尺寸模态框</button>
            <button class="btn btn-info" data-toggle="modal" data-target="#modal6">大尺寸模态框</button>
            <button class="btn btn-info" data-toggle="modal" data-target="#modal7">小尺寸模态框</button>
        </div>
    </div>
</div>
<!-- 尺寸大小-超大尺寸 -->
<div class="modal fade bd-example-modal-xl" id="modal5">    <!-- 这里添加.bd-example-modal-xl -->
    <div class="modal-dialog modal-xl"> <!-- 这里添加.modal-xl -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标题</h5>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                超大尺寸模态框
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 尺寸大小-大尺寸 -->
<div class="modal fade bd-example-modal-lg" id="modal6">    <!-- 这里添加.bd-example-modal-lg -->
    <div class="modal-dialog modal-lg"> <!-- 这里添加.modal-lg -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标题</h5>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                大尺寸模态框
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 尺寸大小-小尺寸 -->
<div class="modal fade bd-example-modal-sm" id="modal7">    <!-- 这里添加.bd-example-modal-sm -->
    <div class="modal-dialog modal-sm"> <!-- 这里添加.modal-sm -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">标题</h5>
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                小尺寸模态框
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

6、data属性

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <!-- data属性，需要添加在button身上 -->
            <!-- 
                data-backdrop   是否显示遮罩层(灰色背景)
                data-keyboard   按esc是否关闭模态框（esc：保存）
                data-focus      让模态框获取到焦点
                data-show       初始化时模态框是否显示
             -->
            <button class="btn btn-dark" data-toggle="modal" data-target="#modal8" data-backdrop="true" data-keyboard="false" data-focus="true" data-show="false">data属性</button>
        </div>
    </div>
</div>
    <!-- data属性 -->
    <div class="modal fade" id="modal8">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    data属性
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

7、方法与事件

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <button class="btn btn-warning" id="myBtn">方法与事件</button>
        </div>
    </div>
</div>
    <!-- 方法与事件 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    data属性
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script>
        //方法
        $('#myBtn').click(function(){
            $('#myModal').modal('show');    //显示
        });

        /* $('#myModal').modal('show');
        setTimeout(function(){
            $('#myModal').modal('hide');
        },2000); */
        //事件
        $('#myModal').on('show.bs.modal', function (e) {
            console.log('显示前');
        });
        $('#myModal').on('shown.bs.modal', function (e) {
            console.log('完全显示了');
        });
        $('#myModal').on('hide.bs.modal', function (e) {
            console.log('隐藏前');
        });
        $('#myModal').on('hidden.bs.modal', function (e) {
            console.log('完全隐藏了');
        });
    </script>