如何重新打开Semantic UI模态框？解决关闭后无法再次显示问题

这个问题我之前也踩过坑！Semantic UI的模态框组件默认会将模态框元素从原DOM位置移动到页面的.ui.dimmer.modals.page容器中，目的是统一管理模态框的层级和显示逻辑，但这就导致你第二次点击卡片时，$(this).children('.ui.modal')找不到目标元素了——因为它已经不在卡片的子节点里了。

最直接的解决方案：禁用模态框的自动移动行为 #

Semantic UI提供了detachable配置项，设置为false就能阻止模态框被移出原DOM位置。只需要修改你的JS代码，在模态框的配置里加上这个属性：

$('.card').click(function() {
  $(this).children('.ui.modal').modal({ 
    blurring: true,
    detachable: false // 核心配置：禁止模态框被移动到dimmer容器
  }).modal('show');
});

加上这个配置后，模态框会始终保留在卡片的子元素位置，无论打开关闭多少次，你通过$(this).children('.ui.modal')都能正确找到它，再次点击卡片就能正常显示模态框了。

备选方案：通过唯一ID绑定模态框（适合复杂场景） #

如果你的页面结构更复杂，或者担心依赖DOM层级会出问题，可以给每个模态框设置唯一ID，同时给对应卡片添加data-*属性关联ID，通过ID来调用模态框：

修改后的HTML：

<div class="ui three stackable cards">
  <div class="card" data-modal-id="modal-tfplus">
    <div class="image">
      <img src="/Assets/img/products/tfplus.jpg">
    </div>
    <div class="content">
      <div class="header">4Life Transfer Factor Plus</div>
    </div>
    <div class="ui modal" id="modal-tfplus">
      <i class="close icon"></i>
      <div class="header">4Life Transfer Factor Plus</div>
      <div class="image content">
        <div class="ui medium image">
          <img src="/Assets/img/products/tfplus.jpg">
        </div>
        <div class="description">
          <div class="ui header">Ingrediente:</div>
          <ul>
            <li>Zinc</li>
            <li>Colostru bovin</li>
            <li>Galbenus de ou</li>
            <li>Cordyvant: complex de polizaharide cu o proprietate exclusiva - IP6 (acid fitic)</li>
            <li>Extract de boabe de soia</li>
            <li>Cordyceps sinensis</li>
            <li>Beta-glucani</li>
            <li>Extract de Agaricus blazeii</li>
            <li>Extract de pulbere de Aloe Vera</li>
            <li>Frunze de maslin</li>
            <li>Ciupercile Maitake si Shiitake</li>
            <li>Pulbere de coaja de lamaie</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="card" data-modal-id="modal-tri-factor">
    <div class="image">
      <img src="/Assets/img/products/tri-factor.jpg">
    </div>
    <div class="content">
      <div class="header">4Life Transfer Factor</div>
    </div>
    <div class="ui modal" id="modal-tri-factor">
      <i class="close icon"></i>
      <div class="header">4Life Transfer Factor</div>
      <div class="image content">
        <div class="ui medium image">
          <img src="/Assets/img/products/tri-factor.jpg">
        </div>
        <div class="description">
          <div class="ui header">Ingrediente:</div>
          <ul>
            <li>Colostru bovin (300 mg in fiecare capsula)</li>
            <li>Galbenus de ou</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

对应的JS：

$('.card').click(function() {
  const targetModalId = $(this).data('modal-id');
  $(`#${targetModalId}`).modal({ 
    blurring: true
  }).modal('show');
});

这种方法完全脱离了DOM层级的依赖，即使模态框被移动（默认行为），也能通过ID精准找到目标元素，适合需要更灵活控制的场景。

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