引导模态的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。