スクロールバーを使用せずにブートストラップモーダルを中央に配置するにはどうすればよいですか？

Question

私はモーダルを常に画面中央に配置しようとしています。モーダルのための十分なスペースがあるが、垂直スクロールバーがその横に表示される小さな画面サイズに

.modal-position { 
      position: fixed; 
      left: 50% !important; 
      top: 50% !important; 
      transform: translate(-50%, -50%); 
} 

しかし、その正確に中心になっていないと：そうする
は、私は、モーダルに以下のCSSクラスを追加しました。同じのため

JSフィドル：上記のコードのためのhttps://jsfiddle.net/86n9pbat/

Answer 1

モーダルが開いているときに、あなたのCSSボディ/モーダルにoverflow: hiddenを追加しようとしましたか？

Answer 2

必要はありません。 ブートストラップモードはデフォルトで応答します。 の幅をに調整したい場合は、CSSファイルのモーダルコンテンツクラスに変更してください。

Answer 3

は、このコード

HTML

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog myModal"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

CSS

.myModal 
{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin:auto; 
    display:table; 
    max-width:50%; 
} 
.myModal .modal-content 
{ 
    display:table-cell; 
} 

ほとんど同じコードを試してみてください。 /：私はこのことができます link for reference 希望は.. モーダルダイアログとCSSをブートストラップポップアップmodel.Pleaseは、このリンクをたどっ `HTTPSに適用するCSSで