Blurring the background for a modal window

Question

Blurring the background for a modal window

The problem is not super complicated and in the example I will describe one solution, as well as its disadvantages. I would like to know if anyone has a great recipe that works quickly and beautifully. So, first, let's look at the code and appearance:

function modal() {
  var element = document.getElementById("test");
  element.classList.toggle("modal-open");
}

* {
  margin: 0;
  padding: 0;
}

.header,
.footer {
  background: #333;
  height: 20vh;
}

.article {
  min-height: 60vh;
}

.middle {
  margin: 30px auto;
  max-width: 400px;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 120px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -150px;
  background: #f6f6f6;
}

.modal-open>*:not(.modal) {
  filter: blur(5px);
}

<div id="test" class="modal-open">

  <div class="header"></div>
  <div class="article">
    <div class="middle">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
  </div>
  <div class="modal"><button onclick="modal()">Жми сюда</button></div>
  <div class="footer"></div>

</div>

For understanding. When opening the window, a class is inserted in body and you can play with the placed elements inside. I'm blurring all the elements except the window itself. Everything seems to be fine. But:

Blurring along the edge of the browser window when there is a dark background doesn't look nice. Ideas on how to pull it off the screen? You can try scale, but such a solution.
This is too hard for the browser to handle. If the page is large and there are a lot of elements inside, blurring it all, especially smooth, is not an easy task.

Maybe someone has thoughts or a ready-made solution for the " ideal" blurring the background?

0

javascript css modal blur

Author: Alexey Giryayev, 2020-04-09

Source

1 answers

score 2 · Answer 1

The problem with your solution is that the elements with position: fixed; will break

button.addEventListener('click', function() {
  document.querySelector('.modal').classList.toggle('blur');
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  background-color: #333;
  height: 80px;
}

.main {
  padding: 100px 150px;
  height: calc(100vh - 160px);
}

.footer {
  background-color: #333;
  height: 80px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blur {
  backdrop-filter: blur(5px);
}

.modal__inner {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  background-color: pink;
  padding: 40px;
}

<header class="header"></header>

<main class="main">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, magni aliquid eligendi quibusdam delectus iure nesciunt cupiditate, fugit ratione distinctio, rerum enim. Cumque recusandae dolores fugiat, totam deleniti eligendi et quas quasi necessitatibus
    placeat dolore doloremque ad cupiditate harum minima illum maxime veniam iste quam nesciunt fuga tempore. Dolores minus sequi iure neque velit adipisci ipsum rem quibusdam quia esse inventore nisi fugit voluptatibus repudiandae id, quos error laboriosam
    molestiae. Optio magnam distinctio at error tempore quos rem labore nobis cum in aspernatur corrupti ad, veritatis tempora provident ullam commodi excepturi ea accusamus dicta. Architecto aperiam necessitatibus ullam tempora omnis.</p>
</main>

<footer class="footer"></footer>

<div class="modal">
  <div class="modal__inner">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, corrupti!

    <button id="button">click</button>
  </div>
</div>