當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
BootStrapJS——modal弹出框
生活随笔
收集整理的這篇文章主要介紹了
BootStrapJS——modal弹出框
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
學(xué)習(xí)參考視頻https://ninghao.net/video/1615
1.對話框 - Modal
需要bootstrap的CSS文件引入，以及jQuery的js包
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框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：<br> 13 ? 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕<br> 14 ? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容<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">×</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 Code2.打開與關(guān)閉對話框
去掉modal in上的in，及后面的style
去掉下方的modal-backdrop的div
添加id data-toggle、data-target data-dismiss
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框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：<br> 16 ? 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕<br> 17 ? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容<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">×</button> 29 <!-- dissmiss點(diǎn)擊消失 --> 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（注：中間出現(xiàn)錯(cuò)誤，后來發(fā)現(xiàn)是bootstrap的js包未引入，只引入了bootstrap的Css包，醉心ing）
3.tabindex 屬性
設(shè)置tab鍵點(diǎn)擊屬性 點(diǎn)擊ESC退出 tabindex="-1"
4.對話框的選項(xiàng)
可以通過Js或者data相關(guān)，去除對話框黑色背景、ESC鍵效果去除等
（1）data
（2）Javascript
刪除data-backdrop
添加js腳本
可以實(shí)現(xiàn)同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框架中的模態(tài)彈出框，分別運(yùn)用了“modal”、“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，其主要又包括三個(gè)部分：<br> 16 ? 彈出框頭部，一般使用“modal-header”表示，主要包括標(biāo)題和關(guān)閉按鈕<br> 17 ? 彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容<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鍵鎖定在當(dāng)前層，可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">×</button> 32 <!-- dissmiss點(diǎn)擊消失 --> 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)進(jìn)行定位,在調(diào)用modal方法， 49 // 把對象交給方法，對象里面可以是對話框的選項(xiàng)或者是值 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> View Code5.對話框的 remote 選項(xiàng)
remote 可以將其他頁面的效果直接載入到modal中（bootstrapjs使用jQuery的load方法），（同源規(guī)則）
HTML可以為modal-content里的所有內(nèi)容，包括modal-header、modal-body、modal-footer
具體效果方法見https://ninghao.net/video/1619
（注：需要web服務(wù)器，有跨域）
data-remote也可以實(shí)現(xiàn)
6.modal 方法
7.對話框的事件
轉(zhuǎn)載于:https://www.cnblogs.com/Shinea_SYR/p/7788297.html
總結(jié)
以上是生活随笔為你收集整理的BootStrapJS——modal弹出框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： halcon模板匹配干扰边缘消除办法（最
- 下一篇： Spring Boot 系列（一）快速入