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에서 해결책을 찾았지만 pure jquery로 빌드 할 때 bootstrap 기반 모달에 대한 질문이 필요합니다.

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

하는 그런 정렬 :

Answer 1

한 가지 방법은 당신이

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

또는

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

Answer 2

이 팝업과 같은 고정 된 CSS를 부여 마진 탑 스타일의 비율을 조정할 수있다 귀하의 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; 
} 

를 사용하여 자바 스크립트 또는 jQuery를 모달의 개폐를 트리거 :

기본적으로, 이러한 중요한 규칙이다.