Bootstrap模態(tài)框禁用空白處點(diǎn)擊關(guān)閉
模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來自一個(gè)單獨(dú)的源的內(nèi)容,可以在不離開父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等。bootstrap的模態(tài)框在默認(rèn)情況下,點(diǎn)擊其他空白區(qū)域(通常是遮罩層),模態(tài)框會(huì)被關(guān)閉,那么以下方法就是禁止點(diǎn)擊其他區(qū)域關(guān)閉模態(tài)框。
$('#myModal').modal({backdrop: 'static', keyboard: false});
backdrop:static時(shí),空白處不關(guān)閉.
keyboard:false時(shí),esc鍵盤不關(guān)閉.
上述代碼也用于打開模態(tài)框。
也可以使用以下方法:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog custom-dialog succ-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>提示信息</h4> </div> <div class="modal-body"> <div><img src="images/loading.gif"><p><span>投標(biāo)成功!</span><img src="images/success.png"></p></div> </div> </div> </div> </div>
這里的data-backdrop="static"指定一個(gè)靜態(tài)的背景,當(dāng)用戶點(diǎn)擊模態(tài)框外部時(shí)不會(huì)關(guān)閉模態(tài)框。而data-keyboard是指當(dāng)按下 escape 鍵時(shí)關(guān)閉模態(tài)框,設(shè)置為 false 時(shí)則按鍵無效。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 頁面遮罩層,并且阻止頁面body滾動(dòng)。bootstrap模態(tài)框原理
- Bootstrap每天必學(xué)之模態(tài)框(Modal)插件
- 淺析BootStrap中Modal(模態(tài)框)使用心得
- Bootstrap 模態(tài)框(Modal)帶參數(shù)傳值實(shí)例
- bootstrap模態(tài)框消失問題的解決方法
- Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼
- 在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
- bootstrap 模態(tài)框(modal)實(shí)現(xiàn)水平垂直居中顯示
- BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁并關(guān)閉功能
- Bootstrap實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
javascript上下方向鍵控制表格行選中并高亮顯示的方法
這篇文章主要介紹了javascript上下方向鍵控制表格行選中并高亮顯示的方法,涉及javascript針對(duì)鍵盤按鍵操作相應(yīng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02javascript獲取select的當(dāng)前值示例代碼(兼容IE/Firefox/Opera/Chrome)
本篇文章主要介紹了javascript獲取select的當(dāng)前值示例代碼(兼容IE/Firefox/Opera/Chrome) 需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法
這篇文章主要介紹了JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04來自騰訊的一個(gè)不固定高度得消息的滾動(dòng)特效
8月最后1天,趕緊補(bǔ)篇博客。貼個(gè)最近看到的騰訊的特效,寫的還可以。先看效果。2010-09-09JS實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法,結(jié)合實(shí)例形式分析了javascript簡單實(shí)現(xiàn)動(dòng)態(tài)添加事件的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05