Javascript 语义UI模式导致我的元素在关闭后从DOM中消失

这里有一个非常简单的问题…请首先注意代码段：

$('#gasmask').on('click', function(){
      $('#gasmask').modal('show');
 });

单击ID为

gasmask

的元素，可以很好地显示语义UI模式。问题是，在我单击离开后，导致模态消失，原始元素也会消失

单击之前：

<div class="content">
    <img alt="Gasmask" class="fademein3 ui image" id="gasmask"    src="https://s3.amazonaws.com/verumdesigns/gasmask.jpg" style="visibility: inherit; opacity: 1;">
</div>

modal关闭后：

<div class="content">

</div>

---

它直接从DOM中消失。什么是dealio？

语义UI在DOM中移动模式内容，正如您所了解的那样。我认为这是为了使模态获得适当的继承样式以按预期显示，而不是继承嵌入模态的任何“组件”

有一个名为“可拆卸”的选项，您可以这样使用：

  $('.modal')
    .modal({
      detachable: false
    })
    .modal('show')

这将确保模型内容保持不变。这对我来说几乎从来都不是一个好的选择，因为模态继承了我用于嵌入模态的组件的样式，这只会破坏模态。也许有一种方法可以通过CSS来防止这种情况

如果CSS不能起到解救作用，那么就要重新设计前端了。 对我来说，这意味着将模式转换为一个单一组件，我可以从另一个组件实例化它，传递显示模式所需的任何值。显然，这方面的细节会因您是否使用了暴动、反应、角度等而有所不同

---

另一种选择是，如果您只有一个模态，而不关心它在DOM中的位置，则使用HTMLID属性标识元素。这样，您就不必关心它相对于组件的位置。

您是否尝试过类似于

$（'#gasmask'）.on（'blur'，function（）{$（'#gasmask'）.modal（'hide'）；}）？只是尝试了一下，没有帮助，我注意到元素实际上并没有从DOM中完全消失。它被移到了外面。