bootstrap modal backdrop cover modal

Question

I have a problem with Modal in my PHP pages.

This is my page code (DEMO) but in my pages I see the Backdrop that cover the modal like in the image IMAGE.

I include in my pages nprogress tool but I tried to remove it, but I have the same problem.

I call the modal function into an IF in my PHP like this:

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

And I put the modal code at the bottom of the page, before the </body> tag like this:

<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

I solved using this code:

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

But if I would that when a user click outside from the modal, it doesn't close? What I have to do?

Answer 2

Add this to your css.

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

or call $("#myModal").css("z-index", "1500"); after opening.

z-index gives the priority to the div, how higher the number how higher the priority.