bootstrap的弹窗剧中_Bootstrap弹出框(modal)垂直居中解决方案

1.

在

css

里，找到

.modal.fade.in {

top: 10%;

}

这个样式，修改它就

ok

了，由于

css

中是全局的，同时也可在页面中定义到某个

modal

的(高度)位置，

方法如下：

#myModal-help

{

top:300px;

}

#myModal-help

这个为

modal

的

id

，这样设置就

ok

了。

2.

在

js

中，

我用的是

bootstrap-modal.js

(如果用的是

bootstrap.js

或者是

bootstrap.min.js

，

同样可以，

但需要找到相

应位置)。

在

js

中找到(红色是我添加的方法)：

var left = ($(document.body).width() - that.$element.width()) / 2;

var top = ($(document.body).height() - that.$element.height()) / 2;

var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

//

滚动条解决办法

var top = (window.screen.height / 4) + scrollY - 120;

//

滚动条解决办法

console.log(left);

that.$element

.addClass('in')

.attr('aria-hidden', false)

.css({

left: left,

top: top,

margin: "0 auto"

});