|
******************模态框************************************************* * *模态框以弹出对话框的形式出现 * *注意:不支持模态框重叠,要想同时支持多个模态框，需要自己写额外的代码来实现。 * *模态框的样式:.modal *fade:让模态框渐入渐出 * *增强模态框的可访问性: *请确保为.modal添加了role="dialog"；aria-labelledby="myModalLabel"属性指 *向模态框标题；aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。 *另外，你还应该为模态框添加描述性信息。为.modal添加aria-describedby属性用以指向描述信息。 * *通过data属性:不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页 *面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指 *向特定的模态框即可。 *也可以通通过JavaScript调用:只需一行JavaScript代码，即可通过id myModal调用模态框 *$('#myModal').modal(options) *************************************************************************** 效果图：  单击按钮，弹出modal模态框  --------------------------------------------------------------------------------- 源码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <title>Navbar Template for Bootstrap</title> <link rel="stylesheet" href="../../css/bootstrap.min.css" type="text/css"></link> </head> <body> <!-- ******************模态框************************************************* * *模态框以弹出对话框的形式出现 * *注意:不支持模态框重叠,要想同时支持多个模态框，需要自己写额外的代码来实现。 * *模态框的样式:.modal *fade:让模态框渐入渐出 * *增强模态框的可访问性: *请确保为.modal添加了role="dialog"；aria-labelledby="myModalLabel"属性指 *向模态框标题；aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。 *另外，你还应该为模态框添加描述性信息。为.modal添加aria-describedby属性用以指向描述信息。 * *通过data属性:不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页 *面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指 *向特定的模态框即可。 *也可以通通过JavaScript调用:只需一行JavaScript代码，即可通过id myModal调用模态框 *$('#myModal').modal(options) *************************************************************************** --> <div class="modal fade" id="myModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <!-- 定义模态框的关闭按钮 --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div> <button id="button1" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal"> 使用bootstrap的data属性弹出modal </button> </div><br/> <div> <button id="button2" class="btn btn-default btn-lg"> 使用javascript弹出modal </button> </div> </body> <script type="text/javascript" src="../../js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="../../js/bootstrap.min.js"></script> <script> $(function(){ /********************************* * $("#myModal").modal({keyboard:true}); * keyboard:true 当按下esc键退出模态框有效. * 为false则无效,默认有效 */ //$("#myModal").modal({keyboard:true}); /********************************************* * 给模态框注册一个事件,"" * hidden.bs.modal和hide.bs.modal在隐藏模态框时执行 * shown.bs.modal:在show.bs.modal打开模态框时执行 * hidden与hide的区别是: * hidden是在模态框关闭后执行函数 * hide是在模态框关闭之前执行函数 * shown和show的区别于hidden,hide类似. * **********************************************/ $("#myModal").on('hidden.bs.modal', function (e) { alert(1); }); $("#myModal").on('hide.bs.modal', function (e) { alert(2); }); $("#myModal").on('shown.bs.modal', function (e) { alert(3); }); $("#myModal").on('show.bs.modal', function (e) { alert(4); }); $("#button2").click(function(){ $("#myModal").modal("toggle"); }); }) </script> </html> |
|
|
来自： I_T_馆 > 《bootstrap》
