在模式打开时阻止页面交互答案

【问题标题】：Prevent page interaction while modal is open在模式打开时阻止页面交互
【发布时间】：2021-12-09 17:05:15
【问题描述】：

这似乎是一个简单的问题，我确信我已经完成了，但找不到答案。

我想在显示时禁用引导模式后面的页面。在我的示例中，当我尝试浏览表格的顶部/底部时，我正在显示一个模式，警告用户。但是，如果他们在关闭它之前再做一次，我会在第一个模态框的顶部堆叠第二个模态框，现在他们必须关闭两个窗口……等等等等……

如何防止这种情况发生？

【问题讨论】：

默认情况下，Bootstrap 不允许您描述的任何事情。 From the docs（v5，你没有提到哪个版本，但是他们都禁止你描述的）：“点击模态“背景”会自动关闭模态”，以及“ Bootstrap 一次只支持一个模式窗口。不支持嵌套模式，因为我们认为它们是糟糕的用户体验。”编辑您的问题，添加 minimal, complete, and verifiable example。
是的，BS 似乎没有提供我需要的东西。我最终推出了自己的解决方案。谢谢。

【解决方案1】：

我不确定您的引导程序版本和当前方案。我认为您应该提供您当前的代码以了解您的真正意思。

但您似乎需要使用 background="static" 属性来避免这种行为。

使用 Twitter Bootstrap 3.x 和 4.x，您应该将此属性添加到您的模态元素：(https://getbootstrap.com/docs/4.6/components/modal/#static-backdrop)

data-backdrop="static"

data-bs-backdrop="static"

【讨论】：