引导模式 - 不要禁用页面

Posted 2023-05-08

【中文标题】引导模式 - 不要禁用页面

【英文标题】：Bootstrap modal - Don't disable the page

【发布时间】：2020-06-04 16:13:48

【问题描述】：

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

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

【问题讨论】：

你可以通过添加这个css来做到这一点.modal overflow: hidden !important; body.modal-open overflow: scroll;

仅供参考，模态被称为模态，因为它改变了页面的模式，其目的是阻止页面，直到用户处理模态中的重要对话框。如果您不是模态框，则可以查找灯箱和弹出窗口。但是 Bootstrap modal 很容易被破解。

感谢您的回答。我仍然使用模态来做我想做的事，如果您想看看我们是如何解决的，请查看@Mahatmasamatman 的答案。

【参考方案1】：

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

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

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

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

或添加自定义 css

body.modal-open  overflow: scroll; 

【讨论】：

这是使正文可滚动的完美解决方案！非常感谢。但这仍然阻止了 .modal 和 .modal-dialog div 后面的点击。也许我可以让这些 div 适合 .modal-content ？

无法使用，因为您无法单击或浏览页面？即使“对话框”看起来更小，整个模态也会放置在整个屏幕上，因此您实际上可能仍在单击模态。尝试向 .modal 类添加一些宽度和高度以缩小它。除此之外，我必须看到一个 jsfiddle。

成功了！ $('.modal').css('width', 'auto');非常感谢，你解决了我所有的问题

+ 如果您希望能够在模态框上方和下方单击，请不要忘记将高度设置为自动