1

I'm trying to create a div which opens up on the center of the page and also blurs out everything behind the div. It should not blur the content of the div.

Most answers on this questions are the suggestion of using a background image.

The background should not be an image but whatever is behind at the moment the div is opened. Is there no attribute which blurs underlying content or an if statement I can use?

Ethan
  • 4,295
  • 4
  • 25
  • 44
NoCSStoday
  • 89
  • 6

2 Answers2

0

Although the Modal solution offered is better, here's a simplified solution, using jquery toggleClass function.

$('#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>
Tiago Vitorino
  • 108
  • 1
  • 15
0

What you are looking for is to wrap the page contents with all else except your modal, and adding the class .blur from my attached code.

The modal should not be a child of the blurrable content therefore, when you open modal and add blur, you achieve the desired effect

.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>

Or can also be seen on CodePen https://codepen.io/ClayC90/pen/KexqLG

Clayton C
  • 531
  • 1
  • 4
  • 19