ブートストラップモーダルjQueryの

Question

正しく

をレンダリングするか、表示されない私はjqueryのを使用して、ブートストラップモーダルレンダリング問題が生じていますこれは私がこれまで持っているものです。

HTML

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Confirmation</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Do you want to save changes you made to document before closing?</p> 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

のjQuery

が

$('#update_modal').on('click', function() { 
     console.log("clicked"); 
     jQuery.noConflict(); 
     $("#myModal").modal('show'); 
    }) 

idが "update_modal"のボタンです。

これはどのように見えるのSnapshotです。あなたはそれが正しく描画されていないと私はモーダルをオフに閉じるにはどこにもクリックすることはできません見ることができます。

私は何かを逃したかどうか誰かに教えてください。あなたにここに

Answer 1

をありがとう、私はmodalさんz-index未満modal-backdropあるのでhttps://jsfiddle.net/z26sxpvk/2/

$('#update_modal').on('click', function() { 
 
    $("#myModal").modal('show'); 
 
});

#myModal { 
 
    z-index:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button id="update_modal" type="submit"> 
 
Open Modal 
 
</button> 
 
<div id="myModal" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
       <h4 class="modal-title">Confirmation</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Do you want to save changes you made to document before closing?</p> 
 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button type="button" class="btn btn-primary">Save changes</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

問題が起きている。この問題を複製していますここで

あなただけmodalためz-index価値を高めるソリューションhttps://jsfiddle.net/z26sxpvk/3/

$('#update_modal').on('click', function() { 
 
    $("#myModal").css({ 
 
    \t 'z-index': 1050 
 
    }).modal('show'); 
 
});

#myModal { 
 
    z-index:0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button id="update_modal" type="submit"> 
 
Open Modal 
 
</button> 
 
<div id="myModal" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
       <h4 class="modal-title">Confirmation</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Do you want to save changes you made to document before closing?</p> 
 
       <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button type="button" class="btn btn-primary">Save changes</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

で行きます。

$('#update_modal').on('click', function() { 
    $("#myModal").css({ 
    'z-index': 1050 
    }).modal('show'); 
}); 

希望すると、これが役立ちます。

Answer 2

この1つは私の作品は、私はあなたのコードとその完璧示すを試してみましたが、ボタンで閉じることができる最初の<div>に

<div class="modal" id="myModal" role="dialog" aria-labelledby="exampleModal" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 

       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title">Confirmation</h4> 
       </div> 

       <div class="modal-body"> 
        <p>Do you want to save changes you made to document before closing?</p> 
        <p class="text-warning"> 
          <small>If you don't save, your changes will be lost.</small> 
        </p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 3

Your modal

をaria-hidden="true"を追加しました。 class = "modal"とdata-target = "＃myModal"の前に、attriubutesを使ってモーダルを表示したり非表示にしたりすることを前提としています。あなたのモーダルが上のコードのように完全に表示されない場合は、おそらくこれが以下のように分類されます： 1.配置モーダルが間違っています。 2.または、ブートストラップフレームワークをアップグレードします。 あなたのコードや改善のようなJavaScriptを使って、前に属性を試してみてください。 これがあなたを助けてくれることを願っています。 あなたの精神を守ってください：D。