彈出二級(jí)對(duì)話框，即在對(duì)話框的基礎(chǔ)上再?gòu)棾鲆粋€(gè)對(duì)話框。這對(duì)于CRM管理類系統(tǒng)來(lái)說(shuō)應(yīng)用場(chǎng)景很常見(jiàn)。看到網(wǎng)上有關(guān)于實(shí)現(xiàn)二級(jí)彈出框的方法，需要在一級(jí)對(duì)話框頁(yè)面上添加不少css樣式。其實(shí)，完全可以不用這么麻煩。
利用bootstrap實(shí)現(xiàn)二級(jí)對(duì)話框很簡(jiǎn)單，只需要在主頁(yè)面上添加兩個(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" });}不過(guò)需要注意的是，在對(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
