如何垂直居中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的觸發模式的開啓和關閉。