bootstrap 模态窗口按钮位置_Bootstrap模态框(modal)垂直居中

今天就在使用Bootstrap框架中遇到的一个问题分享一下，在产品开发的过程中使用了大量的弹出窗口(modal)。

刚开始学习使用的过程中就发现此窗口不能垂直居中，总是偏上，并且不能拖动，看了一下使用说明也没有提供过多的属性设置和方法，就这样使用默认的方式一直用着。最近，客户却提出了一个要求：能不能让弹出窗口居中，因为一些小的窗口偏上总感觉整体页面失衡，大一点的还过得去。

因为之前对Bootstrap也不是很熟悉，便开始baidu、google，发现只有很少的解决方案，如下：

1 $("#myModal").modal().css({

2 "margin-top": function () {

3 return - ($(this).height() / 2);

4 }

5 });

这种方法自己试了一下，并不能完全居中，并且窗口的大小不一样的话，每次显示的margin-top值也会改变，遮盖层还会出现滚动条，效果也不好看。

自己也试了改了几种方式也不容乐观，发现在窗口弹出之前是获取不到$(this).height()的值，本想着是用($(window).height()-$(this).height())/2，发现还是不可行。

最终只能研究一下源码了，发现可以在bootstrap.js文件900行后面添加如下代码，便可以实现垂直居中。

1 that.$element.children().eq(0).css("position", "absolute").css({

2 "margin":"0px",

3 "top": function () {

4 return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";

5 },

6 "left": function () {

7 return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";

8 }

9 });

页面代码如下：

 

1

2

3 Launch demo modal

4

5

6

7

8

9

10 ×

11

Modal title

12

13

14 ...

15

16

17 Close

18 Save changes

19

20

21

22

23

效果图如下：

作者：ZHF

出处：http://zhf.cnblogs.com/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。