引導模態背景封面模態

Question

我的PHP頁面中的Modal出現問題。

這是我的頁面代碼（DEMO），但是在我的頁面中，我看到的背景圖片覆蓋了圖像IMAGE中的模態。

我在頁面中包含nprogress工具，但嘗試將其刪除，但是存在相同的問題。

我將模態函數調用為PHP中的IF，如下所示：

<?php
if($verificaMail=='n'){
?>
        <script>
            $(document).ready(function(){
            $('#myModal').modal()
        });
    </script>
<?php           
}
?>

然后，將模式代碼放在頁面底部的</body>標記之前，如下所示：

<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">x</button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body</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>

Answer 1

我使用以下代碼解決了：

#myModal .modal-dialog{
    z-index: 1041 !important;
}

但是如果我希望當用戶從模式中單擊外部時，它不會關閉？ 我該怎么辦？

Answer 2

將此添加到您的CSS。

#myModal {
  z-index: 16777271 !important;
}

或調用$("#myModal").css("z-index", "1500"); 打開后。

z-index賦予div優先級，數字越高優先級越高。