form1.cn
Make a little progress every day

bootstrap模态框实现垂直居中

05th of November 2017 Javascript JS 2943

bootstrap模态框默认是水平居中,离上面30px,怎么让其在垂直方向也居中呢?,代码如下:

$('#myModal').on('shown.bs.modal', function (e) {  
            $('#myModal').modal('show');//这是打开模态框
            // 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零  
            $(this).css('display', 'block');  
            var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;  
            $(this).find('.modal-dialog').css({  
                'margin-top': modalHeight  
            });  
        });

以上代码可完美实现bootstrap模态框的垂直居中,其中还可以改变 margin-top的值来控制bootstrap模态框的垂直位置