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

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.