Question

这里真的很简单......请先注意代码段：

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

单击ID为gasmask的元素会导致Semantic-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>

模态结束后：

<div class="content">

</div>

直接从DOM中消失。什么是有效的？

Answer 1

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

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

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

这将确保您的模型内容保持原样。这对我来说几乎不是一个好的选择，因为模态继承了我用于嵌入模态的组件的样式，这只是模糊了模态。也许有办法用CSS来阻止它？

如果CSS无法解决问题，那么就要重新设计你的前端了。对我来说，这意味着将模态转换为单例组件，我可以从另一个组件实例化，传递显示模态所需的任何值。显然，关于你是否使用Riot，React，Angular，......的细节会有所不同。

另一种选择，如果你只有一个模态并且你不关心它在你的DOM中的位置，那就是使用HTML id属性来标识你的元素。这样，您无需关心它与组件的相对位置。

Semantic-UI Modal导致我的元素在关闭后从DOM中消失

1 个答案: