html - Twitter Bootstrap Modal 未出现在用户 View 中

Question

我有一个名为#confirm 的动态生成内容模态，与原始 Bootstrap 3 模态相比，没有 CSS 修改。 当我调用 $("#confirm").modal() 它出现在一个绝对位置，总是在页面的顶部，如果页面向下滚动则不会出现在用户面前。

这是模态 HTML:

<div id="confirm" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary" id="moveConfirm">Add</button>
                <button type="button" data-dismiss="modal" class="btn">Cancel</button>
            </div>
        </div>
    </div>
</div>

模态的调用是这样的:

$('#confirm').modal({ backdrop: 'static', keyboard: false })
            .one('click', '#moveConfirm', function() {
                moveCard(card);
            });

正如我所说，没有 CSS 修改(因此 .modal 类处于固定位置)，我不知道这是否会把事情搞砸，但我对 html 和 body 元素进行了 CSS 修改:

html {
    height: 100%;
}
html, body {
    min-height: 100%;
}
body {
    font-size: 1.5em;
    -moz-transform: scale(1, 1); /* Moz-browsers */
    zoom: 1; /* Other non-webkit browsers */
    zoom: 120%; /* Webkit browsers */
}

那么，为什么模态框不总是出现在用户屏幕内？

编辑

页面也有动态内容，在一个 div.cards 中，我注意到这个 div 的父级都没有跟随它的动态高度。但是如果我设置

.modal-dialog {
    top: 50%;
}

或任何其他百分比，模式似乎遵循页面的实际大小，而不是窗口高度决定的大小。所以我不知道高度没有增加是否会导致这种情况。

Answer 1

我认为这可能会有所帮助:https://www.abeautifulsite.net/vertically-centering-bootstrap-modals

它定义了一个函数来将模态窗口垂直定位到窗口的中心，并创建了两个事件处理程序来在显示模态窗口或调整窗口大小时调用该函数。

您还可以尝试修改 html 和 body 元素上的 CSS 样式规则，以确定是否是这些修改导致了问题。