如何使用 Twitter Bootstrap 制作具有模糊背景的模态对话框？答案

【问题标题】：How to make modal dialog with blur background using Twitter Bootstrap?如何使用 Twitter Bootstrap 制作具有模糊背景的模态对话框？
【发布时间】：2013-11-03 12:22:58
【问题描述】：

Bootstrap 在显示模式对话框时使用黑屏。如何在整个背景上制作模糊效果？

【问题讨论】：

为了节省读者一些时间：唯一的方法似乎是模糊实际内容。似乎没有（简单的）方法可以在内容上放置“模糊玻璃层”并使该层后面的所有内容都变得模糊。也不能模糊整个身体，因为您无法“取消模糊”您的模态窗口。

标签： twitter-bootstrap bootstrap-modal blur

【解决方案1】：

您需要先更改文档的结构。它应该看起来像这样

<body>
   <div class="supreme-container">all your content goes here except for the modal</div>
   <div id="myModal" class="modal fade">This is your modal.</div>
</body>

然后在css中

body.modal-open .supreme-container{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

【讨论】：

有一种方法可以让它在 IE 和 Firefox 中工作，详情 here。不过，我不确定它是否有效。
如果模态在容器内？

【解决方案2】：

我认为实现这一点的最简单方法是在模式打开时使用 jQuery 将blur 类应用于背景元素。模态关闭时删除blur...

.blur {
    box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    transform: scale(0.9);
    opacity: 0.6;
}

http://bootply.com/74705

【讨论】：

【解决方案3】：

如果您使用的是 boostrap，那么您的内容已经在某种容器中。所以这对我有用，无需更改 HTML 或任何其他 JS：

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}

【讨论】：

这是最好的解决方案。
我试过这个，但并没有真正做到这一点（我正在使用 React 和 React Bootstrap）。我根据您的回答做了什么并为我工作：body.modal-open #root { -webkit-filter: blur(5px) grayscale(90%); }

【解决方案4】：

对我来说，以下解决方案运行良好

.modal-open .container-fluid, .modal-open  .container {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

【讨论】：

【解决方案5】：

对我来说，我是在一个接一个地打开一个模态，所以没有解决方案在第二个模态和下面的 CSS 上工作，每次都在每个模态中工作：

.modal-backdrop{
   backdrop-filter: blur(5px);
   background-color: #01223770;
}
.modal-backdrop.in{
   opacity: 1 !important;
}

【讨论】：