利用BootStrap彈出二級對話框的簡單實現方法
彈出二級對話框,即在對話框的基礎上再彈出一個對話框。這對于CRM管理類系統(tǒng)來說應用場景很常見??吹骄W上有關于實現二級彈出框的方法,需要在一級對話框頁面上添加不少css樣式。其實,完全可以不用這么麻煩。
利用bootstrap實現二級對話框很簡單,只需要在主頁面上添加兩個含有class="modal"的DIV標簽。如下面代碼:
<!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"> ...... ...... ...... <!-- 代碼映射編輯對話框(屬于一級對話框) --> <div class="modal" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> <!-- Modal 新增[源系統(tǒng)]代碼[類型](屬于二級彈出對話框) --> <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"的對話框彈出之后,在該對話框對應的js腳本中調用如下方法即可彈出id="modal_newDialog"的對話框。
function newDataItem(param){ $('#modal_newDialog').modal({ keyboard: false, backdrop:'static', remote : Global.ctx + "/html/tuple/codeInfo.html" }); }
不過需要注意的是,在對話框的關閉按鈕上調用的方法如下:
一級對話框關閉按鈕的方法為如下綠色標注所示:
<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>
二級對話框關閉按鈕的方法為如下綠色標注所示:
<div class="modal-header"> <button type="button" class="close" onclick="modal_close(this)" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">二級對話框</h4></div>
如果不這樣做,在關閉二級對話框的時候將會關閉一級對話框。
以上所述是小編給大家介紹的利用BootStrap彈出二級對話框的簡單實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
- BootStrap+Angularjs+NgDialog實現模式對話框
- 封裝的dialog插件 基于bootstrap模態(tài)對話框的簡單擴展
- Bootstrap編寫一個在當前網頁彈出可關閉的對話框 非彈窗
- 基于BootStrap Metronic開發(fā)框架經驗小結【六】對話框及提示框的處理和優(yōu)化
- Bootstrap模態(tài)對話框的簡單使用
- 如何使用Bootstrap的modal組件自定義alert,confirm和modal對話框
- JS表格組件神器bootstrap table詳解(基礎版)
- JS組件Bootstrap實現彈出框和提示框效果代碼
- 基于Bootstrap+jQuery.validate實現Form表單驗證
- Bootstrap對話框使用實例講解