Bootstrap модально - не отключать страницу

Question

Я использую bootstrap модальный в своем коде, и я хотел бы, чтобы он просто всплывал, не делая страницу позади полностью непригодной для использования.

$("<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
  });

Это делает модал без фона, но div модального диалога не позволяет мне использовать мою страницу позади. Я хочу, чтобы мне было позволено прокручивать страницу, нажимать на кнопки и держать мой мод видимым.

Answer 1

Когда вы открываете модальное окно, он добавляет класс 'modal-open' к тегу body , не позволяя пользователю прокручивать / использовать страницу.

Примечание : это предполагаемая функциональность модалов. Возможно, то, что вы ищете, может быть достигнуто с помощью всплывающих окон или с помощью специального элемента.

Если вы хотите продолжить текущую реализацию, вы можете удалить модально открытый класс из тела

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

или добавить пользовательский css

body.modal-open { overflow: scroll; }