如何通过单选按钮触发Modal并解决嵌套Modal同时关闭的问题

• 单选按钮逻辑错误：两个单选按钮name属性值不一致，无法实现二选一的互斥效果
• Bootstrap 3 原生不支持多层级modal：点击子modal带data-dismiss="modal"属性的按钮时，关闭事件会向上冒泡触发父modal的关闭逻辑，同时子modal的默认层级低于父modal的遮罩层，也会引发交互异常

1. 新增层级适配CSS #

先给子modal和对应遮罩层设置更高的层级，保证子modal显示在最上层：

/* 适配多层modal层级 */
.modal:nth-of-type(even) {
  z-index: 1052 !important;
}
.modal-backdrop:nth-of-type(even) {
  z-index: 1051 !important;
}

2. 手动控制子modal关闭 #

移除子modal按钮上的data-dismiss="modal"属性，改为手动绑定点击事件关闭子modal，同时阻止事件冒泡到父modal：

// 关闭子modal的方法
function closeConfirmModal() {
  $('#myModal').modal('hide');
  // 阻止事件冒泡，避免触发父modal关闭
  event.stopPropagation();
}

// 补全onYes方法
function onYes() {
  $('#myModal').modal('show');
}

function onNo() {
  $('#myModal').modal('show');
}

子modal的按钮修改为：

<div class="modal-footer">
  <button type="button" class="btn btn-default" onclick="closeConfirmModal()">Close</button>
  <button type="button" class="btn btn-default" onclick="closeConfirmModal()">OK</button>
</div>

3. 修正单选按钮互斥逻辑 #

把两个单选按钮的name属性改为同一个值，实现二选一效果：

<div>
  <div>
    <input type="radio" name="optionChoose" value="true" id="radioYes" class="radioYes" checked="checked" onclick="onYes()" />
    <br />
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="optionChoose" value="false" id="radioNo" class="radioNo" onclick="onNo()" />
    <br />
    <span>No</span>
  </div>
</div>

修改完成后点击子modal的按钮只会关闭当前子modal，不会影响父modal的显示状态。

内容的提问来源于stack exchange，提问作者curiousCat