1. <body>也就是弹框
    2.     <div class="modal fade" id="modal1">定位
    3.         <div class="modal-dialog">模态框的父级，尺寸、大小
    4.             <div class="modal-content">
    5.                 <div class="modal-header">
    6.                     <h5 class="modal-title">标题</h5>
    7.                     <button class="close" data-dismiss="modal">
    8.                         <span>&times;</span>
    9.                     </button>
    10.                 </div>
    11.                 <div class="modal-body">
    12.                         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.
    14.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    16.                         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.
    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.
    20.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    22.                         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.
    24.                         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.
    26.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    28.                         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.
    30.                         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.
    32.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    34.                         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.
    36.                         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.
    38.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    40.                         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.
    42.                         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.
    44.                         Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
    46.                         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.                 </div>
    48.                 <div class="modal-footer">
    49.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    50.                     <button class="btn btn-primary">保存</button>
    51.                 </div>
    52.             </div>
    53.         </div>
    54.     </div>
    56.     <!-- 垂直居中的模态框 -->
    57.     <div class="modal fade" id="modal2">
    58.         <div class="modal-dialog modal-dialog-centered">    <!-- modal-dialog-centered这个class要加在这里 -->
    59.             <div class="modal-content">
    60.                 <div class="modal-header">
    61.                     <h5 class="modal-title">标题</h5>
    62.                     <button class="close" data-dismiss="modal">
    63.                         <span>&times;</span>
    64.                     </button>
    65.                 </div>
    66.                 <div class="modal-body">
    67.                         垂直居中的模态框
    68.                 </div>
    69.                 <div class="modal-footer">
    70.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    71.                     <button class="btn btn-primary">保存</button>
    72.                 </div>
    73.             </div>
    74.         </div>
    75.     </div>
    77.     <!-- 使用栅格系统 -->
    78.     <div class="modal fade" id="modal3">
    79.         <div class="modal-dialog modal-dialog-centered">    <!-- modal-dialog-centered这个class要加在这里 -->
    80.             <div class="modal-content">
    81.                 <div class="modal-header">
    82.                     <h5 class="modal-title">标题</h5>
    83.                     <button class="close" data-dismiss="modal">
    84.                         <span>&times;</span>
    85.                     </button>
    86.                 </div>
    87.                 <div class="modal-body">
    88.                     <div class="container-fluid">
    89.                         <div class="row">
    90.                             <div class="col-md-4 bg-info border">第1列</div>
    91.                             <div class="col-md-4 bg-info border">第2列</div>
    92.                             <div class="col-md-4 bg-info border">第3列</div>
    93.                             <div class="col-md-12 bg-info border">第4列</div>
    94.                         </div>
    95.                         <div class="row">
    96.                             <div class="col bg-info border">第1列</div>
    97.                             <div class="col bg-info border">第2列</div>
    98.                             <div class="col bg-info border">第3列</div>
    99.                             <div class="col bg-info border">第4列</div>
    100.                         </div>
    101.                         <div class="row">
    102.                             <div class="col-md-5 bg-info">第1列</div>
    103.                             <div class="col-md-4 bg-info ml-auto">第2列</div>
    104.                         </div>
    105.                         <div class="row mt-3">
    106.                             <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>
    107.                             <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>
    108.                             <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>
    109.                             <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>
    110.                             <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>
    111.                             <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>
    112.                         </div>
    113.                     </div>
    114.                 </div>
    115.                 <div class="modal-footer">
    116.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    117.                     <button class="btn btn-primary">保存</button>
    118.                 </div>
    119.             </div>
    120.         </div>
    121.     </div>
    123.     <!-- 模态框相同内容不同 -->
    124.     <div class="modal fade" id="modal4">
    125.         <div class="modal-dialog modal-dialog-centered">
    126.             <div class="modal-content">
    127.                 <div class="modal-header">
    128.                     <h5 class="modal-title">标题</h5>
    129.                     <button class="close" data-dismiss="modal">
    130.                         <span>&times;</span>
    131.                     </button>
    132.                 </div>
    133.                 <div class="modal-body">
    134.                     <form action="#">
    135.                         <div class="form-group">
    136.                             <label for="username" class="col-form-label">用户名：</label>
    137.                             <input type="text" class="form-control" id="username">
    138.                         </div>
    139.                         <div class="form-group">
    140.                             <label for="comment" class="col-form-label">评论：</label>
    141.                             <textarea class="form-control" id="comment"></textarea>
    142.                         </div>
    143.                     </form>
    144.                 </div>
    145.                 <div class="modal-footer">
    146.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    147.                     <button class="btn btn-primary">保存</button>
    148.                 </div>
    149.             </div>
    150.         </div>
    151.     </div>
    153.     <!-- 尺寸大小-超大尺寸 -->
    154.     <div class="modal fade bd-example-modal-xl" id="modal5">    <!-- 这里添加.bd-example-modal-xl -->
    155.         <div class="modal-dialog modal-xl">    <!-- 这里添加.modal-xl -->
    156.             <div class="modal-content">
    157.                 <div class="modal-header">
    158.                     <h5 class="modal-title">标题</h5>
    159.                     <button class="close" data-dismiss="modal">
    160.                         <span>&times;</span>
    161.                     </button>
    162.                 </div>
    163.                 <div class="modal-body">
    164.                     超大尺寸模态框
    165.                 </div>
    166.                 <div class="modal-footer">
    167.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    168.                     <button class="btn btn-primary">保存</button>
    169.                 </div>
    170.             </div>
    171.         </div>
    172.     </div>
    173.     <!-- 尺寸大小-大尺寸 -->
    174.     <div class="modal fade bd-example-modal-lg" id="modal6">    <!-- 这里添加.bd-example-modal-lg -->
    175.         <div class="modal-dialog modal-lg">    <!-- 这里添加.modal-lg -->
    176.             <div class="modal-content">
    177.                 <div class="modal-header">
    178.                     <h5 class="modal-title">标题</h5>
    179.                     <button class="close" data-dismiss="modal">
    180.                         <span>&times;</span>
    181.                     </button>
    182.                 </div>
    183.                 <div class="modal-body">
    184.                     大尺寸模态框
    185.                 </div>
    186.                 <div class="modal-footer">
    187.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    188.                     <button class="btn btn-primary">保存</button>
    189.                 </div>
    190.             </div>
    191.         </div>
    192.     </div>
    193.     <!-- 尺寸大小-小尺寸 -->
    194.     <div class="modal fade bd-example-modal-sm" id="modal7">    <!-- 这里添加.bd-example-modal-sm -->
    195.         <div class="modal-dialog modal-sm">    <!-- 这里添加.modal-sm -->
    196.             <div class="modal-content">
    197.                 <div class="modal-header">
    198.                     <h5 class="modal-title">标题</h5>
    199.                     <button class="close" data-dismiss="modal">
    200.                         <span>&times;</span>
    201.                     </button>
    202.                 </div>
    203.                 <div class="modal-body">
    204.                     小尺寸模态框
    205.                 </div>
    206.                 <div class="modal-footer">
    207.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    208.                     <button class="btn btn-primary">保存</button>
    209.                 </div>
    210.             </div>
    211.         </div>
    212.     </div>
    214.     <!-- data属性 -->
    215.     <div class="modal fade" id="modal8">
    216.         <div class="modal-dialog">
    217.             <div class="modal-content">
    218.                 <div class="modal-header">
    219.                     <h5 class="modal-title">标题</h5>
    220.                     <button class="close" data-dismiss="modal">
    221.                         <span>&times;</span>
    222.                     </button>
    223.                 </div>
    224.                 <div class="modal-body">
    225.                     data属性
    226.                 </div>
    227.                 <div class="modal-footer">
    228.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    229.                     <button class="btn btn-primary">保存</button>
    230.                 </div>
    231.             </div>
    232.         </div>
    233.     </div>
    235.     <!-- 方法与事件 -->
    236.     <div class="modal fade" id="myModal">
    237.         <div class="modal-dialog">
    238.             <div class="modal-content">
    239.                 <div class="modal-header">
    240.                     <h5 class="modal-title">标题</h5>
    241.                     <button class="close" data-dismiss="modal">
    242.                         <span>&times;</span>
    243.                     </button>
    244.                 </div>
    245.                 <div class="modal-body">
    246.                     data属性
    247.                 </div>
    248.                 <div class="modal-footer">
    249.                     <button class="btn btn-secondary" data-dismiss="modal">关闭</button>
    250.                     <button class="btn btn-primary">保存</button>
    251.                 </div>
    252.             </div>
    253.         </div>
    254.     </div>
    259.     <div class="container">
    260.         <div class="row mt-5">
    261.             <div class="col">
    262.                 <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>
    263.                 <button class="btn btn-secondary" data-toggle="modal" data-target="#modal2">垂直居中的模态框</button>
    264.                 <button class="btn btn-danger" data-toggle="modal" data-target="#modal3">包含栅格系统的模态框</button>
    266.                 <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="kaivon">模态框相同内容不同</button>
    267.                 <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="陈学辉">模态框相同内容不同</button>
    268.                 <button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="吃瓜群众">模态框相同内容不同</button>
    271.                 <button class="btn btn-info" data-toggle="modal" data-target="#modal5">超大尺寸模态框</button>
    272.                 <button class="btn btn-info" data-toggle="modal" data-target="#modal6">大尺寸模态框</button>
    273.                 <button class="btn btn-info" data-toggle="modal" data-target="#modal7">小尺寸模态框</button>
    275.                 <!-- data属性，需要添加在button身上 -->
    276.                 <!-- 
    277.                     data-backdrop    是否显示遮罩层
    278.                     data-keyboard    按esc是否关闭模态框
    279.                     data-focus        让模态框获取到焦点
    280.                     data-show        初始化时模态框是否显示
    281.                  -->
    282.                 <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>
    284.                 <button class="btn btn-warning" id="myBtn">方法与事件</button>
    285.             </div>
    286.         </div>
    287.     </div>
    289.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    290.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    291.         crossorigin="anonymous"></script>
    292.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    293.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    294.         crossorigin="anonymous"></script>
    296.     <script>
    297.         $('#modal4').on('show.bs.modal',function(ev){
    298.             /*
    299.                 1、$(ev.relatedTarget)    这什值为点击的那个button
    300.                 2、.data('whatever')    这个是获取data-开关的属性的值
    301.              */
    303.             var value=$(ev.relatedTarget).data('whatever');
    305.             $(this).find('.modal-title').text('新评论来自于：'+value);
    306.             $(this).find('.modal-body input').val(value);
    307.         });
    309.         //方法
    310.         $('#myBtn').click(function(){
    311.             $('#myModal').modal('show');
    312.         });
    315.         /* $('#myModal').modal('show');
    316.         setTimeout(function(){
    317.             $('#myModal').modal('hide');
    318.         },2000); */
    320.         //事件
    321.         $('#myModal').on('show.bs.modal', function (e) {
    322.             console.log('显示前');
    323.         });
    324.         $('#myModal').on('shown.bs.modal', function (e) {
    325.             console.log('完全显示了');
    326.         });
    327.         $('#myModal').on('hide.bs.modal', function (e) {
    328.             console.log('隐藏前');
    329.         });
    330.         $('#myModal').on('hidden.bs.modal', function (e) {
    331.             console.log('完全隐藏了');
    332.         });
    333.     </script>