首页 文章

Bootstrap模态垂直居中问题

提问于
浏览 次
0

我正在使用这个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()'？
我该如何解决？

jquery twitter-bootstrap

1 回答

  • 0

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

    之后，您可以为模态的每个部分使用 display: table-row （模态 Headers ，模态体，模态页脚）或单个 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 添加一个类，以防止模式下面的页面在打开时滚动 .

    回复于

相关问题