嘿，我之前也遇到过一模一样的问题！你说的页面失去控制权，基本上是因为关闭子模态框后，Foundation的遮罩层（reveal-modal-bg）没有被彻底清理，或者嵌套弹窗的事件绑定冲突了。下面给你一套完整的实现方案，不管用户点「完成」按钮还是右上角的关闭叉号，都能执行相同的清理逻辑，让页面立刻恢复可控。

一、先把CSHTML结构捋顺 #

首先确保你的模态框结构符合Foundation的规范，每个弹窗要有唯一ID，关闭按钮保留默认类：

<!-- 父弹窗 -->
<div id="parentModal" class="reveal-modal" data-reveal>
  <h3>主弹窗</h3>
  <button id="openDetailBtn" class="success button">查看详情</button>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<!-- 子详情弹窗 -->
<div id="detailModal" class="reveal-modal" data-reveal>
  <h3>详情内容</h3>
  <p>这里是具体的详情信息...</p>
  <button id="completeBtn" class="primary button">完成</button>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a> <!-- 你标注的红框关闭按钮 -->
</div>

二、统一关闭逻辑的JavaScript代码 #

核心是写一个通用的关闭函数，不管触发方式是什么，都执行相同的清理步骤：

// 通用关闭函数：负责关闭弹窗+清理残留+恢复页面
function safeCloseModal(modalId) {
  // 用Foundation自带方法关闭指定弹窗
  $('#' + modalId).foundation('reveal', 'close');
  
  // 手动移除所有残留的遮罩层（这是解决页面锁死的关键！）
  $('.reveal-modal-bg').remove();
  
  // 恢复页面滚动（如果之前被弹窗锁住了）
  $('body').css('overflow', 'auto');
}

// 绑定「查看详情」按钮打开子弹窗
$('#openDetailBtn').on('click', function() {
  $('#detailModal').foundation('reveal', 'open');
});

// 绑定子弹窗的「完成」按钮
$('#completeBtn').on('click', function() {
  safeCloseModal('detailModal');
});

// 监听所有默认关闭按钮（包括父、子弹窗的右上角叉号）
$('.close-reveal-modal').on('click', function() {
  // 找到当前关闭按钮所属的弹窗ID
  const targetModal = $(this).closest('.reveal-modal').attr('id');
  safeCloseModal(targetModal);
});

// 兜底：监听Foundation的弹窗关闭事件，确保最后清理干净
$(document).on('closed.fndtn.reveal', '[data-reveal]', function() {
  // 如果没有任何弹窗还开着，就彻底清理遮罩和恢复滚动
  if ($('.reveal-modal.open').length === 0) {
    $('.reveal-modal-bg').remove();
    $('body').css('overflow', 'auto');
  }
});

三、为啥这么做？ #

• safeCloseModal函数：不仅调用Foundation的关闭方法，还手动清理遮罩层——很多时候页面锁死就是因为遮罩层没有被正确移除，尤其是嵌套弹窗的时候。
• 监听close-reveal-modal类：不用给每个关闭按钮单独写事件，所有默认关闭按钮都会触发同一套逻辑，省心。
• closed.fndtn.reveal事件：作为兜底，万一用户通过其他方式（比如ESC键）关闭弹窗，也能确保最后清理干净，不会留尾巴。

这样处理后，不管用户点「完成」还是右上角的叉号，都会执行完全一样的操作，页面再也不会出现失去控制权的情况了！

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