使用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中的内容。

 

你可能感兴趣的:(bootstrap)