2016-10-04 61 views
0

jQueryのコード:私はモーダル中央揃えするにはどうすればよいjQuery Modalを垂直方向に中央に配置する方法は?

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でビルドすると、ブートストラップベースのモーダルについての質問があります。

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

はその後揃える:

答えて

0

一つの方法は、あなたが

.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 */ 
} 
+0

このリンクも参照してください:https://codepen.io/dimbslmh/full/mKfCc – Vijai

0

は、あなたのポップアップこのような固定のCSSを与える余裕トップスタイルの割合を調整することができていますあなたのJSの幅と高さでそれをそれ:それは

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

jQueryを使用せずに、display: tablemargin: 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のモーダルの開閉をトリガする:

基本的には、これらの重要なルールです。

関連する問題