BootStrapJS——modal弹出框

学习参考视频https://ninghao.net/video/1615

1.对话框 - Modal

需要bootstrap的CSS文件引入，以及jQuery的js包

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
 8 </head>
 9 <body>
10     <div class="container">
11         <p class="alert alert-info">
12             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
13             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
14             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
15             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
16     </div>
17     <div class="modal in" style="display: block">
18         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
19         <div class="modal-dialog model-lg">
20             <div class="modal-content">
21                 <!-- modal头部 -->
22                 <div class="modal-header">
23                     <button class="close">&times;</button>
24                     <h4>用户登录</h4>
25                 </div>
26                 <!-- modal主体 -->
27                 <div class="modal-body">
28                     <p>用户登录的表单</p>
29                 </div>
30                 <!-- modal底部 -->
31                 <div class="modal-footer">
32                     <button class="btn btn-primary">登录</button>
33                 </div>
34             </div>
35         </div>
36     </div>
37     <div class="modal-backdrop in"></div>
38 </body>
39 </html>

View Code

2.打开与关闭对话框

去掉modal in上的in，及后面的style

去掉下方的modal-backdrop的div

添加id data-toggle、data-target data-dismiss

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登录</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
16             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
17             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
18             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
19     </div>
20     <div class="modal fade" id="login-modal">
21     <!-- <div class="modal in" style="display: block">      -->
22         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
23         <!-- fade为窗口加载效果 -->
24         <div class="modal-dialog model-lg">
25             <div class="modal-content">
26                 <!-- modal头部 -->
27                 <div class="modal-header">
28                     <button class="close" data-dismiss="modal">&times;</button>
29                     <!-- dissmiss点击消失 -->
30                     <h4>用户登录</h4>
31                 </div>
32                 <!-- modal主体 -->
33                 <div class="modal-body">
34                     <p>用户登录的表单</p>
35                 </div>
36                 <!-- modal底部 -->
37                 <div class="modal-footer">
38                     <button class="btn btn-primary">登录</button>
39                 </div>
40             </div>
41         </div>
42     </div>
43     <!-- <div class="modal-backdrop in"></div> -->
44     
45 </body>
46 </html>

View Code

（注：中间出现错误，后来发现是bootstrap的js包未引入，只引入了bootstrap的Css包，醉心ing）

3.tabindex 属性

设置tab键点击属性　点击ESC退出　tabindex="-1"

4.对话框的选项

可以通过Js或者data相关，去除对话框黑色背景、ESC键效果去除等

（1）data

（2）Javascript

删除data-backdrop

添加js脚本

可以实现同data-backdrop="false"相同的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹窗测试</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登录</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：<br>
16             ☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮<br>
17             ☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容<br>
18             ☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮</p>
19         <button class="btn btn-primary">try</button>
20     </div>
21     <div class="modal fade" id="login-modal" tabindex="-1">
22     <!-- data-backdrop="false"去除黑色背景 -->
23     <!-- tabindex="-1"tab键锁定在当前层，可ESC键退出 -->
24     <!-- <div class="modal in" style="display: block">      -->
25         <!-- .modal-lg 为大弹出框；.model-sm为小弹出框 -->
26         <!-- fade为窗口加载效果 -->
27         <div class="modal-dialog model-lg">
28             <div class="modal-content">
29                 <!-- modal头部 -->
30                 <div class="modal-header">
31                     <button class="close" data-dismiss="modal">&times;</button>
32                     <!-- dissmiss点击消失 -->
33                     <h4>用户登录</h4>
34                 </div>
35                 <!-- modal主体 -->
36                 <div class="modal-body">
37                     <p>用户登录的表单</p>
38                 </div>
39                 <!-- modal底部 -->
40                 <div class="modal-footer">
41                     <button class="btn btn-primary">登录</button>
42                 </div>
43             </div>
44         </div>
45     </div>
46     <!-- <div class="modal-backdrop in"></div> -->
47     <script>
48         // 使用对话框的id(login-modal)进行定位,在调用modal方法，
49         // 把对象交给方法，对象里面可以是对话框的选项或者是值
50         // show、backdrop、keyboard、remote
51         $(function(){
52             $('#login-modal').modal({
53                 show:false,
54                 backdrop:false
55             });
56         });
57     </script>
58 </body>
59 </html>