引导模式 - 不要禁用页面

Question

我在我的代码中使用引导模式，我希望它只是弹出而不会使后面的页面完全无法使用。

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

这使得 Modal 没有背景，但是 modal-dialog div 不允许我在后面使用我的页面。我希望被允许滚动页面，点击按钮并保持我的模态可见。

Answer 1

当您打开模式时，它会在 body 标签中添加“modal-open”类，防止用户滚动/使用页面。

注意：这是模态框的预期功能。也许您正在寻找的东西可以通过弹出框或自定义元素来实现。

如果你想继续当前的实现，你可以从 body 中移除 modal-open 类

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

或添加自定义 css

body.modal-open { overflow: scroll; }