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');
