Enable background use with modal open in Bootstrap 4

Question

There are other similar questions here, but they all mention to change this:

.modal-backdrop {
    display: none;
}

To enable using the rest of the page while modal is open, except my modal doesn't have this .modal-backdrop, I don't know if it's something new with Bootstrap 4, but this solution did not work.

My modal :

<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Search
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="forms">
            </form>
            <hr>
            <div class="container" id="table">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary">Export</button>
          </div>
        </div>
    </div>
</div>

The idea here is to just have a dialog window that is draggable (I'm using jquery UI), is modal the correct component? Or cards? I used modal as they already position on the center and you don't need javascript to set up the close button.

Also open to suggestions of external libraries that implement a panel-like module and integrates will with Bootstrap.

And is there a way to make the background enabled without messing Bootstrap files too much?

Answer 1

I'm focusing on the .modal-backdrop here, as I assume you already solved the draggable part by using jQuery UI.

When it is used, .modal-backdrop actually is a fixed positioned div element covering the entire viewport and inserted before the </body> tag when the modal dialog is shown. By default this provides the shaded background behind the modal, and also listens to click events to close the modal if needed.

By using data-backdrop="false" this element is not inserted into the DOM, so visually it will seem that there is nothing behind the modal. However, the .modal tag is also an element covering all the viewport (above the page, in the foreground), and acts as a wrapper for the actual .modal-dialog tag.

So, in your scenario it is actually the .modal that is blocking (or catching) user interactions from the rest of your page.
You can overcome that with the help of the pointer-events css property like so:

.modal {
    pointer-events: none;
}

The .modal-dialog will still receive interactions and will work as expected, but the page in the background will be clickable too.