Как сделать так, чтобы задний фон затемнялся, когда посредине экрана весит форма?

Question

[fapchat]

https://codepen.io/fapchat2/pen/dybdPRR?editors=0100
Сразу смотрите #gray

Answer 1

[Adik Izat]

Создать отдельный div под фон формы.

<div class="form-bg"><!-- Этот блок надо растянуть на всю ширину и высоту экрана -->
  <div class="form-close"></div> <!-- Этот блок надо растянуть на всю ширину и высоту родителя. Потом при клике  
                                                  закрывать окно с формой. Якобы закрытие при нажатии на пустое простраство -->
  <div class="form"></div> <!-- Тут внутренности формы -->
</div>

Comments

[Adik Izat]

еще рекомендую обернуть весь контент в какую нибудь дивку для применения filter: blur(5px)

[fapchat]

я пытался

Answer 2

[Владимир Голубь]

Добавь к body класс с цветом при открытие формы или сделай подложку с position: fixed

Answer 3

[Ankhena]

box-shadow: 0 0 0 99999px rgba(0,0,0,0.3); для блока с формой.

p.s. и не используйте id для стилизации.

Comments

[fapchat]

просто брал код из инета

[Ankhena]

fapchat, это не повод писать отвратный код уже на своем сайте.
Просто уберите лишние обертки и поменяйте id на классы.

[fapchat]

Ankhena, этот код как-то повлияет на оптимизацию? Или произойдёт ещё что-то очень нехорошее?