Twitter Bootstrap Modal 未出现在用户视图中答案

【问题标题】：Twitter Bootstrap Modal not appearing inside user viewTwitter Bootstrap Modal 未出现在用户视图中
【发布时间】：2016-09-30 01:24:45
【问题描述】：

我有一个名为#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%;
}

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

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

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

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

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

【讨论】：

不幸的是，该功能不起作用，因为窗口高度没有跟随页面的动态内容（对于此事，父母都没有）。这实际上是我的问题。
谢谢，你帮我解决了这个问题。如果可以的话，我会支持你回答。

【解决方案2】：

好的，我有办法解决它。
使用 method Abdelhakeem Osama 引用我将传递给 css 函数的值（更改 margin-top）更改为等于文档的 scrollTop，而不是窗口的高度。
所以我的 reposition 函数看起来像这样：

function reposition() {
    var modal = $(this),
        dialog = modal.find('.modal-dialog');
    modal.css('display', 'block');
    var top = $(document).scrollTop();
    dialog.css("margin-top", Math.max(0, top+15));
}

+15 的存在只是为了让模态框不会太靠近用户屏幕的顶部，但可以根据您的需要进行修改。

【讨论】：