引導模態的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

在這裏，我已經複製了問題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小於modal-backdrop。

在這裏，你有一個解決方案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>

去只是增加z-index值modal。

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

希望這會幫助你。

Answer 2

這一個作品，對我來說，在第一<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. Placement模式是錯誤的。 2.或者升級你的引導框架。 嘗試使用屬性之前，然後用JavaScript代碼或改進。 希望這可以幫助你。 保持你的精神：D。