| authour： | 陈博益 |
| updatetime： | 2015-04-22 06:52:15 |
| friendly link： | http://v3.bootcss.com/javascript/#modals |
目录：
1，bootstrap模态框的使用示例
2，注意点
1，下面是一个简单的例子说明bootstrap模态框的使用：
1 <!DOCTYPE html> //modal.html 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet" /> 7 <script src="js/jquery-1.11.2.min.js"></script> 8 <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> 9 </head> 10 <body> 11 12 <h2>创建模态框（Modal）</h2> 13 <!-- 按钮触发模态框 --> 14 <button class="btn btn-primary btn-lg" data-toggle="modal" href="test.html" 15 data-target="#myModal"> 16 开始演示模态框 17 </button> 18 19 <!-- 模态框（Modal） --> 20 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 21 aria-labelledby="myModalLabel" aria-hidden="true"> 22 <div class="modal-dialog"> 23 <div class="modal-content"> 24 <div class="modal-header"> 25 <button type="button" class="close" 26 data-dismiss="modal" aria-hidden="true"> 27 × 28 </button> 29 <h4 class="modal-title" id="myModalLabel"> 30 模态框（Modal）标题 31 </h4> 32 </div> 33 <div class="modal-body"> 34 在这里添加一些文本 35 </div> 36 <div class="modal-footer"> 37 <button type="button" class="btn btn-default" 38 data-dismiss="modal"> 39 关闭 40 </button> 41 <button type="button" class="btn btn-primary"> 42 提交更改 43 </button> 44 </div> 45 </div><!-- /.modal-content --> 46 </div><!-- /.modal --> 47 48 </body> 49 </html>
1 <!DOCTYPE html> //test.html
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <style>
7 .test {
8 font-size:x-large;
9 background-color:yellow
10
11 }
12 </style>
13 </head>
14 <body>
15 <div class="test">test</div>
16
17 </body>
18 </html>
2，ps:在实际项目中一般点击a标签或者是button触发方法，然后通过发送ajax将内容填充到modal-content中,需要注意的是每次重新填充时，需要清空modal-content中的内容。
时间： 2024-10-20 02:26:49