时间戳

首页 > 解决方案 > 引导模式 - 不要禁用页面

javascript - 引导模式 - 不要禁用页面

问题描述

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

$("<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 不允许我在后面使用我的页面。我希望被允许滚动页面，单击按钮并保持我的模态可见。

标签： javascriptjquerytwitter-bootstrapmodal-dialog

解决方案

当您打开模式时，它会将“modal-open”类添加到正文标记，防止用户滚动/使用页面。

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

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

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

或添加自定义 css

body.modal-open { overflow: scroll; }

推荐阅读