如何使用Twitter Bootstrap制作带模糊背景的模态对话框?

时间:2013-10-24 16:52:15

标签: twitter-bootstrap bootstrap-modal blur

Bootstrap在显示模态对话框时使用停电。我如何在整个背景上模糊效果?

4 个答案:

答案 0 :(得分:41)

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

<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);
}

答案 1 :(得分:21)

如果您使用的是boostrap,那么您的内容已经存在于某种容器中。 所以这对我有用,而不需要改变HTML或任何其他JS:

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

答案 2 :(得分:7)

我认为实现这一目标的最简单方法是在模态打开时使用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 :(得分:1)

对我来说,我要一个接一个地打开一个模态,所以没有解决方案可以在第二个模态下工作,而CSS在每个模态下都可以工作:

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