Question

我正在使用语义UI来创建网页（没有React，NPM或其他任何花哨的内容，只是纯HTML / CSS）。我正在尝试向页面添加模态，但是由于模态高度过长，它的行为非常奇怪。我的代码中没有其他类似Bootstrap的框架。

行为方式：

Image for my code

应如何操作：

Standard Image

语义UI版本： 2.4.2

语义UI是否正确安装？是，其他组件正常工作。

我的代码

HTML：

<div id="myModal" class="ui basic modal">
        <div class="ui icon header">
            <i class="archive icon"></i>
            Archive Old Messages
        </div>
        <div class="content">
            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button">
                <i class="remove icon"></i>
                No
            </div>
            <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                Yes
            </div>
        </div>
    </div>

JS：

$('.ui.basic.modal')
  .modal('show')
;

直到现在我一直在尝试：

#myModal { position: relative;}，然后将id添加到我的模式中，如以下答案中所述：https://stackoverflow.com/a/40774996/10934182
body{ max-height: 100vh; }，如此处所述：semantic-ui modal stretching window height
此小提琴（不是我的小提琴）中解释的代码：http://jsfiddle.net/MrLogical/2hda8e18/

谢谢！

Answer 1

在您的JSfiddle中，我注意到您在.modal-content内的div有min-height: 1000px。我删除了这个，现在模态是正常的高度。

Answer 2

这不是模态高度的问题。这是因为'semantic-ui-css'最新版本的缘故。您可以通过安装2.2.14版本的语义UI-css来解决此问题。 *

npm install语义-ui-css@2.2.14

* 它为我和其他许多人做了。所以希望它也对您有用

语义UI模态高度过长

我的代码

HTML：

JS：

直到现在我一直在尝试：

2 个答案: