模态框(modal)自动居中

Posted liong01

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模态框(modal)自动居中相关的知识,希望对你有一定的参考价值。

// modal对用户可见
$(‘.modal‘).on(‘shown.bs.modal‘, function () {
    modalOnResize(this);
})

// 浏览器窗口大小改变事件
window.onresize = function(){
    // 已显示modal
    var node = $(".modal:visible");
    if (node.length) {
        modalOnResize(node);
    }
}

function modalOnResize(node){
    var modalHeight = ($(window).height() - $(node).find(‘.modal-dialog‘).height()) / 2;
    $(node).find(‘.modal-dialog‘).css(‘margin-top‘, modalHeight);
}

以上是关于模态框(modal)自动居中的主要内容,如果未能解决你的问题,请参考以下文章

BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中

为啥点击模态框的时候为自动生成两个div元素modal-backdrop

居中的模态负载微调器引导程序 4

bootstrap弹出的模态框水平垂直居中的实现

模态框 modal.js

bootstrap shown.bs.modal 不起作用,因此模态框无法滚动到顶部