实现模态框关闭功能时打开按钮同步隐藏问题求助

问题根源 #

你将id="modelID"绑定在了包裹「打开模态框按钮」和「模态框本身」的外层容器popupContainer上，调用关闭方法时直接将整个外层容器设为display: none，自然会连带容器内的打开按钮一起隐藏。
你尝试用hidden属性也没用的原因同理，也是操作了错误的目标元素，导致整个容器被隐藏。

修复方案 #

你当前用了HTML原生<details>标签实现模态框的展开/收起逻辑，不需要手动修改DOM的display属性，只要操作<details>标签的open原生属性即可实现关闭，同时保留打开按钮。

步骤1：修改HTML结构 #

给<details>标签新增专属id，移除外层容器的modelID（避免误操作）：

<div class="popupContainer">
  <!-- 给details加id -->
  <details id="modalDetails">
    <summary>
      <div class="popupButton">
        Show me the modal
      </div>
      <div class="details-modal-overlay"></div>
    </summary>
    <div class="details-modal">
      <div class="details-modal-title">
        <h1>My details modal</h1>
        <b onclick="closeTheModel();">Close Model</b>
      </div>
      <div class="details-modal-content">
        <p>

        </p>
      </div>
    </div>
  </details>
</div>

步骤2：修改关闭逻辑 #

替换原有JS代码，直接移除<details>的open属性即可关闭模态框：

function closeTheModel() {
    const modalDetails = document.getElementById('modalDetails');
    modalDetails.removeAttribute('open');
}

这个方案完全贴合你现有代码的技术选型，不需要修改CSS，也不会出现按钮连带隐藏的问题。

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