使用bootstrap模态框实现浮动层

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                         &times;
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中的内容。

作者：Cboii

出处：https://www.cnblogs.com/chenboyi081/

本博客所有文章仅用于学习、研究和交流目的，欢迎非商业性质转载。

由于博主的水平不高，不足和错误之处在所难免，希望大家能够批评指出。

在wordpress安装、主题、插件以及开发上面有问题的，可以加入qq群：1140958614（Wp建站每日学习/交流群）进行学习和提问

如果需要建站服务，可以直接联系我的qq：185369045

相关阅读:
错题集-index.html
面向对象-原型
 jQuery案例
 jQuery报错
 关于《哈利波特》书的购买方案
 《大道至简》读后感
 网络助手之NABCD
返回一个二维整数数组中最大联通子数组的和
 返回一个二维整数数组中最大子数组的和。
返回一个整数数组中最大子数组的和(环)（已更正）
原文地址：https://www.cnblogs.com/chenboyi081/p/4440570.html