bootstrap模态弹窗的一些常用选项与操作

首先，我们举一个例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>Bootstrap 实例 - 模态框（Modal）插件</title>
 6     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 7     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 8     <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 </head>
10 <body>
11 
12 
13 <!-- 模态框（Modal） -->
14 <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="false" data-backdrop="static" data-keyboard="false">
15     <div class="modal-dialog">
16         <div class="modal-content">
17             <div class="modal-body">
18                 <div style="width:100px;margin:0 auto;">
19                     <div style="position:relative;">
20                         <span style="position:absolute;left:-60px;top:10px;">账户:</span><input type="text" name="UserName" class="form-control" style="width:130px;"/>
21                     </div>
22                     <div style="position:relative;margin-top:20px;margin-bottom:20px;">
23                         <span style="position:absolute;left:-60px;top:10px;">密码:</span><input type="password" name="Password" class="form-control" style="width:130px;"/>
24                     </div>
25                 </div>
26             </div>
27             <div class="modal-footer" style="text-align:center;">
28                 <button type="button" class="btn btn-primary">
29                     登录
30                 </button>
31             </div>
32         </div><!-- /.modal-content -->
33     </div><!-- /.modal -->
34 </div>
35 </body>
36 <script>
37     $('#myModal').modal('show');
38     
39     //$('#myModal').modal('hide');
40     
41     //$('#myModal').modal('toggle');
42 </script>
43 </html>

在这个例子中：

1、可以通过修改  data-backdrop   属性来设置点击到模态框之外的位置是否会关闭模态框

　　(1)：设置为data-backdrop="static"时不会关闭

　　(2)：设置为data-backdrop="true"时会关闭，true为默认选项

2、可以通过修改  data-keyboard   属性来设置按下ESC键之后是否会关闭模态框

　　(1)：设置为data-keyboard="false"时不会关闭

　　(2)：设置为data-keyboard="true"时会关闭，true为默认选项

3、以下Jquery显示模态框

$('#myModal').modal('show');

4、以下Jquery隐藏模态框

$('#myModal').modal('show');

5、以下Jquery切换(显示/隐藏)模态框

$('#myModal').modal('toggle');
 
 








		

		
posted @ 
2018-04-14 19:16 
范海辛Z 
阅读(251) 
评论(0) 
 
收藏 
举报