Question

我正在尝试创建一个div，该div在页面的中央打开，并且还模糊了div后面的所有内容。它不应模糊div的内容。

关于此问题的大多数答案是使用背景图像的建议。

背景不应该是图像，而应该是打开div时的任何背景。没有可以使基础内容模糊的属性或我可以使用的if语句吗？

Answer 1

尽管提供的Modal解决方案更好，但这是使用jquery toggleClass函数的简化解决方案。

$('#first').click(function(){
	$('#first').toggleClass("open");
  $('#second').toggleClass("open");
})

body{
 position:relative;
 height:500px;
 width:500px;
 z-index: -2;
}

#first{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:blue;
  filter: blur(6px);
  z-index:-1;
}

#second{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: white;
}

#first.open{
  filter: blur(0px);
}

#second.open{
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>

  <div class="open" id="first"></div>

  <div class="open" id="second">
    Not blurred
  </div>
  
</body>

Answer 2

您正在寻找的是用除模式之外的所有其他内容包装页面内容，并从我附带的代码中添加类.blur。

模态不应该是模糊内容的子代，因此，当您打开模态并添加模糊时，您将达到所需的效果

.blur {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  padding: 40px;
  background: rgba(0,0,0,0.4);
  filter: blur(5px);
}

.myModal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 150px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: beige;
}

<body>
  <div class="blur">
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor congue enim a mattis. Etiam cursus a nisi quis feugiat. Duis pellentesque pharetra neque, at euismod augue bibendum vel. Mauris ornare mi placerat sapien facilisis dictum. Nam varius metus quis ultrices ultrices. Quisque gravida rhoncus turpis in viverra. Etiam sit amet orci malesuada magna vehicula interdum. Sed tellus ante, facilisis vel purus vitae, sodales mollis justo. Nullam vel libero sed diam luctus auctor ut ultricies tortor. Fusce porttitor volutpat venenatis. Curabitur a blandit erat. Duis mattis ornare nisl. Donec vestibulum quam sed consequat mollis. In eget aliquet metus. Sed imperdiet eros sit amet ullamcorper malesuada.
</p><p>
Fusce euismod sem a erat molestie, non mattis lorem dapibus. Donec tincidunt odio nec eleifend accumsan. Vestibulum quis justo sit amet lacus vehicula finibus nec in massa. Quisque ut luctus lacus. Proin eu elit laoreet, egestas neque at, tempus magna. Sed ac felis lacinia, luctus est at, iaculis mauris. Donec sit amet luctus lectus, nec cursus felis. Pellentesque pretium augue dui, tempor convallis dui placerat id. Donec vitae ex erat. Suspendisse non tincidunt ante. Vestibulum a risus vitae tortor vulputate placerat. Pellentesque pharetra bibendum lacus, in euismod dolor tempus eget. Donec imperdiet nisi sit amet mauris scelerisque laoreet. Pellentesque aliquet venenatis interdum. Aenean in augue diam.
</p><p>
Nullam tempus nec arcu vitae rutrum. Vivamus ipsum felis, finibus sit amet mauris ac, tempus dictum mi. Integer sollicitudin sollicitudin interdum. Nam semper sit amet felis eu viverra. Proin condimentum ante risus, at hendrerit urna elementum ac. Curabitur elementum, erat et sodales lobortis, dui tellus molestie urna, a molestie elit lorem at arcu. Ut nulla dui, vulputate ac ipsum sit amet, dignissim fringilla velit. Donec dignissim pretium dignissim. Nulla pulvinar faucibus velit. Ut commodo maximus velit, a hendrerit leo eleifend eget. Donec sed vestibulum diam, quis rhoncus tellus. Nunc nec congue orci, non semper nibh. Vivamus nec lorem lorem. Donec interdum egestas magna, non imperdiet nibh placerat ut.
</p><p>
Donec lacinia pretium imperdiet. Sed elementum pulvinar maximus. Nullam tempor mattis dapibus. Maecenas vitae erat lobortis, luctus est vel, finibus enim. Pellentesque varius feugiat volutpat. Ut sit amet consectetur elit, at mollis leo. Aenean et commodo libero. Curabitur ac elit lorem. Cras eget quam pretium, porta nisi at, sollicitudin est. Donec in mi vitae urna dignissim hendrerit. Mauris euismod nibh et risus blandit blandit. Suspendisse vitae varius nisi. Vestibulum sem lorem, dictum in ultricies ac, tincidunt eu ex. Fusce sed iaculis mi. Sed eu enim convallis, interdum est eu, mattis risus.
</p><p>
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</p>

</div>
  
<div class="myModal">
  Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
  </div>
</body>

或者也可以在CodePen https://codepen.io/ClayC90/pen/KexqLG

上看到

打开框背景模糊

2 个答案: