Question

我正在使用这个jQuery函数来垂直居中模态。

var centeredModal = function() {
    var modalVerticalCenterClass = ".modal";

    function centerModals($element) {
        var $modals;
        if ($element.length) {
            $modals = $element;
        } else {
            $modals = jQuery(modalVerticalCenterClass + ':visible');
        }
        $modals.each(function(i) {
            var $clone = jQuery(this).clone().css('display', 'inline-block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            jQuery(this).find('.modal-content').css({"margin-top": top, "transition" : "all 0.5s ease-in-out 0s"});
        });
    }
    jQuery(modalVerticalCenterClass).on('show.bs.modal', function() {
        centerModals(jQuery(this));
    });
    jQuery(window).on('resize', centerModals);

};

此功能有效，但有时则无效如果我关闭然后多次打开模态，则模态不能正确居中问题可能是'$ clone.find（'。modal-content'）。height（）'？
我该如何解决？

Answer 1

不使用jQuery，您只需将display: table与margin: auto一起用于主要内容容器即可。这些规则将页面内部的模态（div或其他）置于中心，而不用担心可能是动态的高度。

之后，您可以对模态的每个部分（模态标题，模态体，模态页脚）或单个display: table-row使用display: table-cell作为内部容器。但是，第二步可以省略，我更喜欢使用它来保持（显示）表的一致性。

此centered modal is here的一个工作示例。

如前所述，使用此解决方案，您的模态始终以页面为中心，无论其高度如何：您可以通过删除示例的某个段落并重新运行小提琴来轻松地使用它。

基本上，这些是重要的规则：

.modal-content {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 60%; /* here you can also use a fixed width */
    overflow: auto;
    z-index: 50;
}

当然，您需要某种JavaScript（jQuery或wathever）来触发模态打开和关闭。此时，我还建议使用它向body添加一个类，以阻止模式下面的页面在打开时滚动。

Bootstrap模态垂直居中问题

1 个答案: