语义模式大小一直延伸到页面的高度

Question

我正在尝试实现一个基本模态，但它的大小会一直延伸到页面的高度。

触发码：

$('.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>

Answer 1

事实证明Bootstrap包与我使用的Semantic-UI包有冲突。

只需做：

meteor remove twbs:bootstrap

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

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

Answer 2

我有同样的问题。我的解决方案是以这种方式从Semantic UI修改模态组件的CSS：

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

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

它对我有用，我希望能帮助你。我同意Michael Khait，这个问题可能发生在Boostrap和Semantic UI之间的任何冲突

Answer 3

这是因为语义和引导模态CSS规则相互冲突 因此，您只需将以下CSS规则分配给您的主Div或包装器类

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

Answer 4

基于op的答案，如果您出于任何原因都不希望删除Bootstrap，则可以使用此规则解决该问题，只需在您的语义中添加自定义class模态然后unset所有位置：

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

Answer 5

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

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

这个很适合我