使用bootstrap模態框實現浮動層

本文轉載自查看原文 2015-04-23 07:05 2899 bootscrapt/ 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中的內容。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap使用模態框modal實現表單提交彈出框 Bootstrap使用模態框modal實現表單提交彈出框 bootstrap中的模態框（modal，彈出層）使用bootstrap的JS插件實現模態框效果 Bootstrap -- 模態框實現拖拽移動 bootstrap dialog 使用模態對話框 Bootstrap模態框按鈕 BootStrap的動態模態框及靜態模態框 bootstrap中模態框、模態框的屬性一個頁面使用多個 bootstrap 模態框，區別不同模態框方法