Bootstrap modal垂直居中 - 大西瓜3721

Bootstrap modal垂直居中

在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法，这种方法自己试了一下，并不能完全居中，并且窗口的大小不一样的话，每次显示的margin-top值也会改变，遮盖层还会出现滚动条，效果也不好看，代码如下：

Js代码  

1. //在初始显示时设置垂直居中  
2. $(\'#YourModal\').modal().css({  
3.     \'margin-top\': function () {  
4.         return -($(this).height() / 2);  
5.     }  
6. });  
7.   
8. //或者我们可以将这个效果注册到显示事件中：  
9. $(\'.modal\').on(\'show\', function() {  
10.     $(this).css({  
11.         \'margin-top\': function () {  
12.             return -($(this).height() / 2);  
13.         }  
14.     });  
15. });  

      今天正好遇到这个问题，不过我用的Bootstrap框架是Bootstrap3版本了，解决代码如下：  

Js代码  

1. $(\'#YourModal\').on(\'show.bs.modal\', function (e) {  
2.     $(this).find(\'.modal-dialog\').css({  
3.         \'margin-top\': function () {  
4.             var modalHeight = $(\'#yourModal\').find(\'.modal-dialog\').height();  
5.             return ($(window).height() / 2 - (modalHeight / 2));  
6.         }  
7.     });      
8. });