eug*_*nes 25 blur twitter-bootstrap bootstrap-modal
Bootstrap在显示模态对话框时使用停电.我如何在整个背景上模糊效果？
luc*_*ian 44
您需要先更改文档的结构.看起来应该是这样的
<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);
}
Gab*_*scu 22
如果您使用的是boostrap,那么您的内容已经存在于某种容器中.所以这对我有用而无需改变HTML或任何其他JS:
.modal-open .container-fluid, .modal-open .container {
-webkit-filter: blur(5px) grayscale(90%);
}
Muh*_*lal 10
对我来说，我正在一个接一个地打开一个模态，所以没有解决方案适用于第二个模态和以下 CSS 每次都在每个模态中工作：
.modal-backdrop{
backdrop-filter: blur(5px);
background-color: #01223770;
}
.modal-backdrop.in{
opacity: 1 !important;
}
我认为实现这一目标的最简单方法是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;
}
在 Bootstrap 4 中，这个 CSS 片段对我来说很有效：
.modal.fade.show {
backdrop-filter: blur(5px);
}