Bootstrap模态框（modal）垂直居中的实例代码

Bootstrap官网下载：http://v3.bootcss.com/

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

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

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

$（"#myModal"）.modal（）.css（{"margin-top": function （） {return - （$（this）.height（） / 2）;}}）;

参考地址：http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/

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

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

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

that.$element.children（）.eq（0）.css（"position", "absolute"）.css（{"margin":"0px","top": function （） {return （that.$element.height（） - that.$element.children（）.eq（0）.height（）-40） / 2 + "px";},"left": function （） {return （that.$element.width（） - that.$element.children（）.eq（0）.width（）） / 2 + "px";}}）;

页面代码如下：

<div><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><！-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div><！-- /.modal-content --></div><！-- /.modal-dialog --></div><！-- /.modal --></div>

效果图如下：

以上所述是小编给大家介绍的Bootstrap模态框（modal）垂直居中的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！