Bootstrap 3 Modals垂直居中

半兽人 发表于: 2019-07-27   最后更新时间: 2019-07-29 23:56:22  
{{totalSubscript}} 订阅, 2,016 游览

Bootstrap3的modal不是居中的,下面的代码可以做到这一点。

代码很容易理解。 有一个处理重新定位的函数和几个事件处理程序:

**
 * Vertically center Bootstrap 3 modals so they aren't always stuck at the top
 */
$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

即使调整窗口大小,这也会使您的模态垂直居中。

更新于 2019-07-29

查看bootstrap3更多相关的文章或提一个关于bootstrap3的问题,也可以与我们一起分享文章