Как сделать размытие заднего фона модального окна?

Question

[WildEnemy]

При загрузке страницы появляеться модальное окно, как сделать размытиее заднего фона?

<div>
  <h1>Your document</h1>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam blanditiis, in facere itaque animi quibusdam corrupti ipsa laborum? Cupiditate eos ad quas, voluptatum placeat amet assumenda quasi hic eveniet non?
  </p>
</div>
<div class="popup">
  <div class="popup-content">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur adipisci libero error nemo quasi deleniti hic quam assumenda perferendis aliquid, aperiam enim consectetur et repellat. Consectetur quo dolorem officia! Perferendis.
    </p>
    <input type="checkbox" id="politics" onclick="check();" value="" autocomplete="off"/>
    <a href="ссылка на страницу согласия">Я даю согласие на обработку персональных данных.</a>
    <br>
    <input type="checkbox" id="politics2" onclick="check();" value="" autocomplete="off"/>
    <a href="ссылка на страницу согласия">Я ознакомился со всеми условиями соглашения</a>
    <br>
    <input type="submit" name="submit" class="submit button-close js-popup-close" disabled="" value="Отправить" />
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.popup {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.popup-content {
  position: relative;
  max-width: 320px;
  margin: 50px auto;
  border: 1px solid black;
  background: white;
  padding: 20px;
}
.button-close {
  position: absolute;
  left: 20px;
  button: 10px;
}

function check() {
var submit = document.getElementsByName('submit')[0];
if (document.getElementById('politics').checked && document.getElementById('politics2').checked)
submit.disabled = '';
else
submit.disabled = 'disabled';
}

jQuery(document).ready(function() {
  // BEGIN Hide popup by button click
  jQuery('.js-popup-close').click(function() {
   jQuery(this).parents('.popup').hide();
  });
  // BEGIN Hide popup by button click
});

Answer 1

[WapSter]

backdrop-filter: blur(2px);
Не поддерживается в ie

Comments

[WildEnemy]

Спасибо

Answer 2

[Шохрух Шаймардонов]

добавь следующее:

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

Comments

[WildEnemy]

Все размыто, а мне нужно чо бы модалку было четко видно

[AUser0]

И <input type=submit> поменять на <input type=button>, во избежание реального submit-а...

[Шохрух Шаймардонов]

WildEnemy, тогда можешь псевдоэлемент after или before также как .popup сделать на весь экран и его размыть. Но, тут нужно z-index поиграть.
P.s. залей в песочницу, постараюсь помочь

[WildEnemy]

Шохрух Шаймардонов, Спасибо за помощь, но вариант с backdrop-filter: blur(2px); хорошо сработал

[Шохрух Шаймардонов]

WildEnemy, ну отметьте вопрос решением, чтобы в будущем кому-то помогло