Bootstrap 显示多个模态框（modal）

Posted 2020-12-21

概述

Bootstrap只支持同时显示一个模态框（貌似是因为【data-dismiss="modal"】委托为了全局，故显示多个模态框后，点击“关闭”，【data-dismiss="modal"】会将所有的模态框关闭）。若要显示多个模态框并各自单独关闭，可使用Js（或Jquery）单独进行控制。

方法

触发点（Button或a标签）属性不要设置data-dismiss="modal"，设置id属性进行控制（保证多个modal触发点的各自的id属性唯一即可）。示例如下：

//Modal 001 代码（id="modal_001"）
...
<div class="modal-footer">
                <button type="button" id="btn_OK_001" class="btn btn-primary">确定</button>
                <button type="button" id="btn_Cancel_001" class="btn btn-secondary">取消</button>
</div>

//Modal 002 代码（id="modal_002"）
...
<div class="modal-footer">
                <button type="button" id="btn_OK_002" class="btn btn-primary">确定</button>
                <button type="button" id="btn_Cancel_002" class="btn btn-secondary">取消</button>
</div>

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