概述
Bootstrap只支持同时显示一个模态框(貌似是因为【data-dismiss="modal"】委托为了全局,故显示多个模态框后,点击“关闭”,【data-dismiss="modal"】会将所有的模态框关闭)。若要显示多个模态框并各自单独关闭,可使用Js(或Jquery)单独进行控制。
备注:Bootstrap Modal多个弹出层顺序与html中定义顺序相关,后定义的位于上层。
方法
触发点(Button或a标签)属性不要设置data-dismiss="modal",设置id属性进行控制(保证多个modal触发点的各自的id属性唯一即可)。示例如下:
//Modal 001 代码(id="modal_001")
...
//Modal 002 代码(id="modal_002")
...
//Js控制代码
$("#btn_OK_001").click( function() {
$("#modal_001").modal( "hide" );
} );
$("#btn_Cancel_001").click( function() {
$("#modal_001").modal( "hide" );
} );
$("#btn_OK_002").click( function() {
$("#modal_002").modal( "hide" );
} );
$("#btn_Cancel_002").click( function() {
$("#modal_002").modal( "hide" );
} );