利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法
彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再彈出一個(gè)對(duì)話框。這對(duì)于CRM管理類系統(tǒng)來說應(yīng)用場(chǎng)景很常見??吹骄W(wǎng)上有關(guān)于實(shí)現(xiàn)二級(jí)彈出框的方法,需要在一級(jí)對(duì)話框頁面上添加不少css樣式。其實(shí),完全可以不用這么麻煩。
利用bootstrap實(shí)現(xiàn)二級(jí)對(duì)話框很簡(jiǎn)單,只需要在主頁面上添加兩個(gè)含有class="modal"的DIV標(biāo)簽。如下面代碼:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="decorator" content="window" /> <style type="text/css"> th,td { white-space: nowrap; text-align:center; } </style> </head> <body> <div class="row"> ...... ...... ...... <!-- 代碼映射編輯對(duì)話框(屬于一級(jí)對(duì)話框) --> <div class="modal" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> <!-- Modal 新增[源系統(tǒng)]代碼[類型](屬于二級(jí)彈出對(duì)話框) --> <div class="modal" id="modal_newDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> </div> <script type="text/javascript" src="codeMapList.js"></script> </body> </html>
這樣就可以在id="codeMapEditModal"的對(duì)話框彈出之后,在該對(duì)話框?qū)?yīng)的js腳本中調(diào)用如下方法即可彈出id="modal_newDialog"的對(duì)話框。
function newDataItem(param){ $('#modal_newDialog').modal({ keyboard: false, backdrop:'static', remote : Global.ctx + "/html/tuple/codeInfo.html" }); }
不過需要注意的是,在對(duì)話框的關(guān)閉按鈕上調(diào)用的方法如下:
一級(jí)對(duì)話框關(guān)閉按鈕的方法為如下綠色標(biāo)注所示:
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="codeMapEditHeader">XXX</h4></div>
二級(jí)對(duì)話框關(guān)閉按鈕的方法為如下綠色標(biāo)注所示:
<div class="modal-header"> <button type="button" class="close" onclick="modal_close(this)" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">二級(jí)對(duì)話框</h4></div>
如果不這樣做,在關(guān)閉二級(jí)對(duì)話框的時(shí)候?qū)?huì)關(guān)閉一級(jí)對(duì)話框。
以上所述是小編給大家介紹的利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對(duì)話框
- 封裝的dialog插件 基于bootstrap模態(tài)對(duì)話框的簡(jiǎn)單擴(kuò)展
- Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對(duì)話框 非彈窗
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【六】對(duì)話框及提示框的處理和優(yōu)化
- Bootstrap模態(tài)對(duì)話框的簡(jiǎn)單使用
- 如何使用Bootstrap的modal組件自定義alert,confirm和modal對(duì)話框
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- Bootstrap對(duì)話框使用實(shí)例講解
相關(guān)文章
javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式
這篇文章主要介紹了javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-12-12JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法,涉及javascript操作div層及相關(guān)樣式的技巧,需要的朋友可以參考下2015-05-05JavaScript利用normalizr實(shí)現(xiàn)復(fù)雜數(shù)據(jù)轉(zhuǎn)換
當(dāng)我們需要進(jìn)行數(shù)據(jù)轉(zhuǎn)換以便拆分和維護(hù)時(shí),可以使用redux作者 Dan Abramov 編寫的normalizr來處理數(shù)據(jù),本文將為大家詳細(xì)講講其用法,感興趣的可以了解一下2022-07-07微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法分析
這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法,結(jié)合具體實(shí)例形式分析了setData進(jìn)行數(shù)組修改的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12javascript學(xué)習(xí)總結(jié)之js使用技巧
本篇文章給大家分享javascript學(xué)習(xí)總結(jié)之js使用技巧,都是精華喔~小伙伴快來學(xué)習(xí)吧。2015-09-09原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
這篇文章主要介紹了原生JS實(shí)現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過tab切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09