1-11 模态弹出框--JavaScript触发时的参数设置（一）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

模态弹出框--JavaScript触发时的参数设置（一）

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

这一节，我们对JavaScript触发模态弹出窗的属性设置进行了介绍，下一节我们将继续对参数设置和事件设置进行介绍。

任务

我来试试：在右侧代码编辑器中尝试本小节新学习的参数。

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JavaScript触发时的参数设置（一）</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <button class="btn btn-primary" type="button">点击我</button>
  10. <div class="modal" id="mymodal" tabindex="-1">
  11.     <div class="modal-dialog">
  12.         <div class="modal-content">
  13. 			<div class="modal-header">
  14. 				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  15. 				<h4 class="modal-title">模态弹出窗标题</h4>
  16. 			</div>
  17. 			<div class="modal-body">
  18. 				<p>模态弹出窗主体内容</p>
  19. 			</div>
  20. 			<div class="modal-footer">
  21. 				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  22. 				<button type="button" class="btn btn-primary">保存</button>
  23. 			</div>
  24. 		</div><!-- /.modal-content -->
  25. 	</div><!-- /.modal-dialog -->
  26. </div><!-- /.modal -->
  27.  
  28. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  29. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  30. <script>
  31.   $(function(){
  32.     $(".btn").click(function(){
  33.       $("#mymodal").modal("toggle");
  34.     });
  35.   });
  36. </script>
  37. </body>
  38. </html>
下一节