twitter-bootstrap 如何使用 Twitter Bootstrap 制作带有模糊背景的模态对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19571955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make modal dialog with blur background using Twitter Bootstrap?
提问by eugenes
Bootstrap use blackout when it shows modal dialog. How I make blur effect on entire background?
Bootstrap 在显示模式对话框时使用停电。如何在整个背景上制作模糊效果？
回答by lucian
You need to alter the structure of your document first. It should look something like this
您需要先更改文档的结构。它应该看起来像这样
<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>
And then in css
然后在 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);
}
回答by Gabriel Bratescu
If you are using boostrap then your content is already in some kind of container. So this works for me without the need to alter may HTML or any additional JS:
如果您使用的是 boostrap，那么您的内容已经在某种容器中。因此，这对我有用，无需更改 HTML 或任何其他 JS：
.modal-open .container-fluid, .modal-open .container {
-webkit-filter: blur(5px) grayscale(90%);
}
回答by Zim
I think the easiest way to achieve this is to apply a blurclass to background elements using jQuery when the modal is open. Remove blurwhen the modal is closed...
我认为实现这一点的最简单方法是blur在模式打开时使用 jQuery将一个类应用于背景元素。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;
}
回答by Muhammad Bilal
For me I was Opening One Modal after another so No solution were working on Second modal and below CSS Worked on every time in every modal:
对我来说，我正在一个接一个地打开一个模态，所以没有解决方案适用于第二个模态和以下 CSS 每次都在每个模态中工作：
.modal-backdrop{
backdrop-filter: blur(5px);
background-color: #01223770;
}
.modal-backdrop.in{
opacity: 1 !important;
}
回答by Sachin from Pune
For me, the following solution is working fine
对我来说，以下解决方案工作正常
.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);
}
