bootstrap弹出多个模态框_Bootstrap 显示多个模态框（modal）

概述

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" );

} );