语义 UI 模态大小不断扩展到页面的高度答案

【问题标题】：semantic-ui modal size keeps extending to the height of a page语义 UI 模态大小不断扩展到页面的高度
【发布时间】：2015-08-01 05:27:23
【问题描述】：

我正在尝试实现一个基本模式，但它的大小一直被扩展到页面的高度。

触发码：

$('.ui.modal.apply-modal').modal('show');

模式代码：

<div class="ui modal apply-modal">
<i class="close icon"></i>
<div class="header">
  Modal Title
</div>
<div class="content">
  facebook
</div>
<div class="actions">
  <div class="ui button">Cancel</div>
  <div class="ui button">OK</div>
</div>

【问题讨论】：

您似乎无法使用 jQuery 插件选项设置模态大小，因此请改用 CSS，当模态打开时，右键单击它并点击“检查元素”，检查 CSS 并相应地修改它。

标签： javascript css meteor semantic-ui

【解决方案1】：

原来Bootstrap 包与我使用的Semantic-UI 包冲突。

只需这样做：

meteor remove twbs:bootstrap

事情解决了。当然，这不是一个理想的解决方案，但无论如何我都不应该同时使用这两个框架。

好吧，经过大约两个小时的调试......

【讨论】：

非常感谢您的回答。我自己永远也想不通！

【解决方案2】：

我遇到了同样的问题。我的解决方案是通过这种方式从 Semantic UI 修改模态组件的 CSS：

 .modal { position: relative;} or #myModal { position: relative;}

<div id="myModal" class="ui small modal"></div>

它对我有用，我希望对你有所帮助。我同意 Michael Khait 的观点，Boostrap 和 Semantic UI 之间的任何冲突都可能会出现此问题

【讨论】：

【解决方案3】：

这是因为 Semantic 和 bootstrap Modal CSS 规则相互冲突所以你可以做的就是简单地将以下 CSS 规则分配给你的主 Div 或包装类

top: auto;
bottom: auto;
right: auto;
left: auto;

【讨论】：

【解决方案4】：

基于op 的回答，如果您不想以任何理由删除Bootstrap，您可以使用此规则来解决问题，只需将自定义class 添加到您的语义模式然后unset all职位：

.Semantic-Modal {
    top: unset!important;
    right: unset!important;
    bottom: unset!important;
    left: unset!important;
}

【讨论】：

【解决方案5】：

你也可以决定覆盖css，即modal类

.modal{
        bottom: auto!important;
        left: auto!important;
        right: auto!important;
        top: auto!important;
    }

这个很适合我

【讨论】：