Bootstrap modal appearing under background

Question

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing u

Answer 1

I have a lighter and better solution..

It could be easily solve through some additional CSS styles..

1. hide the class .modal-backdrop (auto generated from Bootstrap.js)

   .modal-backdrop
   {
   display:none;
   visibility:hidden; 
   position:relative
   }
   

2. set the background of .modal to a translucent black backdrop image.

   .modal
   {
   background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
   // translucent image from google images 
   z-index:1100; 
   }
   

This will works best if you have a requirement that needs the modal to be inside an element and not near the </body> tag..

Answer 2

in your navbar navbar-fixed-top need z-index = 1041 and also if u use bootstarp-combined.min.css the also change .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Answer 3

I got it to work by giving a high z-index value to the modal window AFTER opening it. E.g.:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

Answer 4

A but late on this but here is a generic solution -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Visit this link - Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar for details.

Answer 5

none of the suggested solutions above worked for me but this technique solved the issue:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 

Answer 6

In my case solve it, add this in my stylesheet:

.modal-backdrop{
  z-index:0;
}

with google debugger, can examine element BACKDROP And modify attributes. Goog luck.