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' class 添加到 body 标记，从而阻止用户 scrolling/using 页面。

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

如果您想继续当前的实现，您可以从 body

中删除 modal-open class

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

或添加自定义 css

body.modal-open { overflow: scroll; }

Bootstrap 模态 - 不要禁用页面

Bootstrap modal - Don't disable the page

javascript

jquery

modal-dialog

twitter-bootstrap