Home » Jquery » javascript – Bootstrap modal – Don't disable the page

javascript – Bootstrap modal – Don't disable the page

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’m using bootstrap modal in my code and I’d like it to just pop up without making the page behind totally unusable.

$("<div>")
  .attr({ id: "myModal", tabindex: "-1", role: "dialog" })
  .addClass("modal fade")
  .append(
    $("<div>")
      .addClass("modal-dialog modal-lg")
      .attr("role", "document")
      .append(
        $("<div>")
          .addClass("modal-content")
          .append(
            $("<div>")
              .addClass("modal-header")
              .addClass("bg-info text-white")
              .html("EXAMPLE"),
            $("<div>")
              .addClass("modal-body")
              .html("EXAMPLE"),
            $("<div>")
              .addClass("modal-footer")
              .html("EXAMPLE")
          )
      )
  )
  .modal({
    backdrop: false
  });

This makes a Modal without backdrop, but the modal-dialog div don’t allow me to use my page behind. I want to be allowed to scroll the page, to click on buttons and keep my modal visible.

How to&Answer:

When you open the modal, it adds ‘modal-open’ class to body tag, preventing the user from scrolling/using the page.

Note: that is the intended functionality of modals. Maybe what you are looking for could be achieved with popovers, or a custom element.

If you want to to proceed with the current implementation, you can remove modal-open class from body

$("body").removeClass("modal-open");

or add custom css

body.modal-open { overflow: scroll; }