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 feat

Answer 1

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

Answer 2

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 3

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.