BootStrapJS——modal彈出框

時間 2019-11-19

標籤 bootstrapjs modal 彈出简体版

原文原文鏈接

學習參考視頻https://ninghao.net/video/1615javascript

1.對話框 - Modalcss

須要bootstrap的CSS文件引入，以及jQuery的js包html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈窗測試</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
 8 </head>
 9 <body>
10     <div class="container">
11         <p class="alert alert-info">
12             Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：<br>
13             ☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕<br>
14             ☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容<br>
15             ☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕</p>
16     </div>
17     <div class="modal in" style="display: block">
18         <!-- .modal-lg 爲大彈出框；.model-sm爲小彈出框 -->
19         <div class="modal-dialog model-lg">
20             <div class="modal-content">
21                 <!-- modal頭部 -->
22                 <div class="modal-header">
23                     <button class="close">&times;</button>
24                     <h4>用戶登陸</h4>
25                 </div>
26                 <!-- modal主體 -->
27                 <div class="modal-body">
28                     <p>用戶登陸的表單</p>
29                 </div>
30                 <!-- modal底部 -->
31                 <div class="modal-footer">
32                     <button class="btn btn-primary">登陸</button>
33                 </div>
34             </div>
35         </div>
36     </div>
37     <div class="modal-backdrop in"></div>
38 </body>
39 </html>

View Code

2.打開與關閉對話框java

去掉modal in上的in，及後面的stylejquery

去掉下方的modal-backdrop的divweb

添加id data-toggle、data-target data-dismissbootstrap

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈窗測試</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登陸</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：<br>
16             ☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕<br>
17             ☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容<br>
18             ☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕</p>
19     </div>
20     <div class="modal fade" id="login-modal">
21     <!-- <div class="modal in" style="display: block">      -->
22         <!-- .modal-lg 爲大彈出框；.model-sm爲小彈出框 -->
23         <!-- fade爲窗口加載效果 -->
24         <div class="modal-dialog model-lg">
25             <div class="modal-content">
26                 <!-- modal頭部 -->
27                 <div class="modal-header">
28                     <button class="close" data-dismiss="modal">&times;</button>
29                     <!-- dissmiss點擊消失 -->
30                     <h4>用戶登陸</h4>
31                 </div>
32                 <!-- modal主體 -->
33                 <div class="modal-body">
34                     <p>用戶登陸的表單</p>
35                 </div>
36                 <!-- modal底部 -->
37                 <div class="modal-footer">
38                     <button class="btn btn-primary">登陸</button>
39                 </div>
40             </div>
41         </div>
42     </div>
43     <!-- <div class="modal-backdrop in"></div> -->
44     
45 </body>
46 </html>

View Code

（注：中間出現錯誤，後來發現是bootstrap的js包未引入，只引入了bootstrap的Css包，醉心ing）跨域

3.tabindex 屬性服務器

設置tab鍵點擊屬性　點擊ESC退出　tabindex="-1"框架

4.對話框的選項

能夠經過Js或者data相關，去除對話框黑色背景、ESC鍵效果去除等

（1）data

（2）Javascript

刪除data-backdrop

添加js腳本

能夠實現同data-backdrop="false"相同的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈窗測試</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
 8     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 9     <script type="text/javascript" src="js/bootstrap.js"></script>
10 </head>
11 <body>
12     <div class="container">
13         <a href="" data-toggle="modal" data-target="#login-modal">登陸</a>
14         <p class="alert alert-info">
15             Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：<br>
16             ☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕<br>
17             ☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容<br>
18             ☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕</p>
19         <button class="btn btn-primary">try</button>
20     </div>
21     <div class="modal fade" id="login-modal" tabindex="-1">
22     <!-- data-backdrop="false"去除黑色背景 -->
23     <!-- tabindex="-1"tab鍵鎖定在當前層，可ESC鍵退出 -->
24     <!-- <div class="modal in" style="display: block">      -->
25         <!-- .modal-lg 爲大彈出框；.model-sm爲小彈出框 -->
26         <!-- fade爲窗口加載效果 -->
27         <div class="modal-dialog model-lg">
28             <div class="modal-content">
29                 <!-- modal頭部 -->
30                 <div class="modal-header">
31                     <button class="close" data-dismiss="modal">&times;</button>
32                     <!-- dissmiss點擊消失 -->
33                     <h4>用戶登陸</h4>
34                 </div>
35                 <!-- modal主體 -->
36                 <div class="modal-body">
37                     <p>用戶登陸的表單</p>
38                 </div>
39                 <!-- modal底部 -->
40                 <div class="modal-footer">
41                     <button class="btn btn-primary">登陸</button>
42                 </div>
43             </div>
44         </div>
45     </div>
46     <!-- <div class="modal-backdrop in"></div> -->
47     <script>
48         // 使用對話框的id(login-modal)進行定位,在調用modal方法，
49         // 把對象交給方法，對象裏面能夠是對話框的選項或者是值
50         // show、backdrop、keyboard、remote
51         $(function(){
52             $('#login-modal').modal({
53                 show:false,
54                 backdrop:false
55             });
56         });
57     </script>
58 </body>
59 </html>