html 模态框页面居中,bootstrap 3.3 模态框垂直居中问题

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

用过Bootstrap的童鞋有时候都会遇到一个问题，关于模态窗口，总是从上面slide下来，位置并不居中，在网上找了一些方式，例如弹出窗口后修改css，可以实现，还可以通过修改原生bootstrap.js 文件来调整下拉模态窗口的位置，下面介绍一种简单移动的方式，让模态窗口在屏幕上居中显示：/* center modal */

function centerModals(){

$('.modal').each(function(i){

var $clone = $(this).clone().css('display', 'block').appendTo('body');    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);

top = top > 0 ? top : 0;

$clone.remove();

$(this).find('.modal-content').css("margin-top", top);

});

}

$('.modal').on('show.bs.modal', centerModals);

$(window).on('resize', centerModals);