如何垂直居中jQuery Modal？

Question

jQuery代码：

function thumb(id,ths) { 
    if (<?=$loggedin?>) { 
     $.post(base_url+"index.php/myad/addthumbs", {uniqueid:id}); 
     $(ths).addClass("red"); 
    } else { 
     _ths=$(ths); 
     var number = Math.floor(Math.random()*90000) + 10000; 
     $("#captcha").attr("data-id",id); 
     $("#captcha").text(number); 
     $("#pop").modal("show"); 
    } 
} 

我如何中心模式？请帮助我，并提前致谢。

我在google和stackoverflow上找到了解决方案，但是当它由纯jquery构建时，问题是基于bootstrap的模态。

Answer 1

一种方法是可以调整的上边距风格的百分比

.modal-dialog { 
    margin-top:10%; /* Based on your modal height adjust the percentage */ 
} 

OR

.modal-dialog { 
    padding-top:10%; /* Based on your modal height adjust the percentage */ 
} 

Answer 2

给你弹出一个固定的CSS是这样的：

#pop { 
    position:fixed; 
    top:50%; 
    left:50%; 
} 

然后对齐它的宽度和高度在你的JS中：

$("#pop").css({ 
    "margin-top":-($(this).height()/2), 
    "margin-left":-($(this).width()/2) 
}); 

Answer 3

如果不使用jQuery，您可以简单地将display: table与margin: auto一起用于主内容容器。

这个centered modal is here的一个工作示例。

基本上，这些都是重要的规则：

.modal-content { 
    display: table; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    max-width: 60%; /* here you can also use a fixed width */ 
    overflow: auto; 
    z-index: 50; 
} 

使用JavaScript或jQuery的触发模式的开启和关闭。