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

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.