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。卡中，我注意到这个div的父母都没有跟随它的动态高度。但是，如果我设置

.modal-dialog {
    top: 50%;
}

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

Answer 1

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

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

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

Answer 2

好的，我找到了解决办法使用引用的method Abdelhakeem Osama，我将传递给css函数的值（将 margin-top 更改为）更改为等于文档的 scrollTop ，而是窗户的高度所以我的重新定位函数看起来像这样：

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就是这样，模态不会太靠近用户屏幕的顶部，但可以根据需要进行修改。

Twitter Bootstrap Modal没有出现在用户视图中

编辑

2 个答案: