Bootstrap笔记——模态框的使用

1.官网例子地址

https://v3.bootcss.com/javascript/#modals

2.模态框div块中的部分属性

属性名称	作用
`class="modal fade"`	设置div块为要显示的模态框CSS样式，fade类是淡入淡出的动画效果，可以删除
`tabindex="-1"`	tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）如果设置为-1,就表示modal框脱离了全局html的tab切换页面，独立出来，也就是说 tab键只能切换模态框内的元素的焦点。
`role="dialog"`	role=“dialog”代表这是一个对话框
`aria-labelledby="exampleModalLabel"`	用于指向模态框的标题栏
`aria-hidden="true"`	用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）
`class="close"`	模态窗口的关闭按钮设置样式
`data-dismiss="modal"`	是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口
class="modal-body"
data-toggle="modal"	HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口
`bs-example-modal-lg`	大模态框样式
`bs-example-modal-sm`	小模态框样式
`data-backdrop="static"`	设置显示灰色透明背景，但是点击不可关闭，如果设置为true，则点击可关闭

3.模态框的主要事件

https://v3.bootcss.com/javascript/#modals-events

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

4.简单示例

4.1静态打开

（1）button设置：设置按钮button的data-toggle:"modal"（以模态框的形式打开），data-target:"#myModal"（设置为modal的id）

模态框div设置：设置id属性，class="modal fade"，tabindex="-1" role="dialog"，还可以设置模态框标题、模态框body以及模态框footer，详见官网示例https://v3.bootcss.com/javascript/#modals-examples

（2）简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal示例</title>
       <!-- Bootstrap -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
       <link href="css/index.css" rel="stylesheet">
</head>
<body>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test">测试按钮</button>

    <!-- 模态框 -->
    <div class="modal fade" id="test" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
              <p>我是测试按钮打开的模态框&hellip;</p>
            </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 -->




            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

View Code

4.2动态打开

（1）使用jQuery为按钮添加click事件。

（2）只需一行 JavaScript 代码，即可通过元素的 id名为 myModal 调用模态框：

$(\'#myModal\').modal(options)

（3）可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性，需要将参数名称放到 data- 之后，例如 data-backdrop=""。

参数

（3）示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal示例</title>
       <!-- Bootstrap -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
       <link href="css/index.css" rel="stylesheet">
       <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
  
        <button id="dtBtn" type="button" class="btn btn-warning">动态打开测试按钮</button>
  


<!-- 模态框 -->
<div class="modal fade" id="test2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">动态打开模态框标题</h4>
        </div>
        <div class="modal-body" style="background-color: blueviolet;">
          <p>我是动态测试按钮打开的模态框&hellip;</p>
        </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>

$("#dtBtn").click(function(){
        $(\'#test2\').modal({
            keyboard: false,  //为true时键盘上的 esc 键被按下时关闭模态框。
            backdrop:false   //为true时点击模态框外的灰色背景将关闭模态框
        });

    });
   


</script>



            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

View Code

4.3模态框事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal示例</title>
       <!-- Bootstrap -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
       <link href="css/index.css" rel="stylesheet">
       <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
  
        <button id="dtBtn" type="button" class="btn btn-warning">动态打开测试按钮</button>
  
<!-- 模态框 -->
<div class="modal fade" id="test2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">动态打开模态框标题</h4>
        </div>
        <div class="modal-body" style="background-color: blueviolet;">
          <p>我是动态测试按钮打开的模态框&hellip;</p>
        </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>

$("#dtBtn").click(function(){
        $(\'#test2\').modal({
            keyboard: false,  //为true时键盘上的 esc 键被按下时关闭模态框。
            backdrop:false   //为true时点击模态框外的灰色背景将关闭模态框
        });
    
    });
   
    $(function(){
        $(\'#test2\').on(\'show.bs.modal\', function () {
            alert("显示模态框之前触发该事件");
        });
    
        $(\'#test2\').on(\'shown.bs.modal\', function () {
            alert("完全显示模态框之后触发");
        });
    
        $(\'#test2\').on(\'hide.bs.modal\', function () {
            alert("隐藏模态框之前触发该事件");
        });
    
        $(\'#test2\').on(\'hidden.bs.modal\', function () {
            alert("完全隐藏模态框之后触发该事件");
        });
    })
  
    
</script>

            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

运行结果

5.模态框传参

5.1通过button传递内容给绑定的modal，官网给了个例子https://v3.bootcss.com/javascript/#modals-related-target

（1）给butto设置一个data-*属性，并赋值给该属性，比如data-whatever = "xxxxxxx"，data-后面可以自定义属性。

（2）使用JS调用模态框，在show.bs.modal事件中获取触发该模态框的按钮，取得data-*属性的值，传参完成

5.2示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modal传参</title>
       <!-- Bootstrap -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
       <link href="css/index.css" rel="stylesheet">
       <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
  
        <button id="dtBtn" type="button" class="btn btn-warning" data-toggle="modal" data-target="#test2" data-cc="我是小明">传递参数给模态框按钮</button>
  


<!-- 模态框 -->
<div class="modal fade" id="test2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">模态框(传参)</h4>
        </div>
        <div class="modal-body" style="background-color: blueviolet;">
          <div class="form-group">
            <label for="recipient-name" class="control-label">button传给我的参数是:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
        </form>
      </div>
        </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(){
      $(\'#test2\').on(\'show.bs.modal\', function (event) {
     var button = $(event.relatedTarget) // Button that triggered the modal
     console.log(button);
     var recipient = button.data(\'ccS\') // Extract info from data-* attributes
     console.log(recipient);
     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal\'s content. We\'ll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)

      modal.find(\'.modal-body input\').val(recipient)
})
    });
  
    

</script>



            <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
            <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
            <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

View Code

参考文章：

https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

秒客网

Bootstrap笔记——模态框的使用

相关文章