Bootstrap 3 - modal disappearing below backdrop when using a fixed sidebar

Question

I have indentified this problem as happening due to the popup getting enclosed in another div with position:fixedthat I cannot avoid due to a fixed sidebar feature I am using that encloses all the content in the body and encloses it in a separate div. To offset this issue I am thinking of changing the position of the modal on the fly using the following code -

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        $(this).appendTo("body").modal('show');
     });

Doing this just gives me a <error> jquery.js:1in the console. This fix used to work perfectly in bootstrap 2 .

Edit - tried this next

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        console.info(e);
        $(e.target).appendTo('body').modal('show');
     });

But this obviously messes it up due to it getting stuck in an infinite loop. Guess it will get fine once I find an efficient way to detect multiple show events on the same modal at a time.

Answer 1

Ok so after more than an hour of coding and evaluating, I am underlining all the possible solutions -
1. Take your modal out of the parent container that should be having the css property of either position:fixed or relative.
2. Remove the aforementioned two properties on the modal element itself.
3. For cases like mine where the modal is autoappended to a section of the div for situations requiring responsiveness, I coded the following bit for bootstrap 3 that should work generically on all modals without needing to individually code javascript for each.

    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--;
        }
     });

This works perfectly as of now fingers crossed. It has been coded for bootstrap 3 and should work for other versions too provided you change the event handler to detect the prior to opening event for the modal.

Answer 2

I was in the same situation, and I came up with a nifty CSS trick:

.modal {
  background: rgba(255, 255, 255, 0.8); /* The color depends on your template */
}
.modal-backdrop {
  display: none;
}

Basically, I make sure that the original backdrop is hidden and I add a transparent white background to the modal container. Turns out the container takes the whole height of the body in order to efficiently center the actual modal.

However, this trick might not work if your page content is "shorter" than your browser. If your page takes up 60% of your browser's vertical height, the new backdrop will be applied to this 60% only.

Answer 3

Best solution: Using firebug to view z-index of sidebar, example: 1000 we insert file css this code:

.modal-backdrop
{
 z-index: 1100;
}
.modal
{
 z-index: 1200;
}