fapchat
@fapchat

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

https://codepen.io/fapchat2/pen/dybdPRR?editors=0100
Сразу смотрите #gray
  • Вопрос задан
  • 117 просмотров
Решения вопроса 4
JaxAdam
@JaxAdam
Junior Full-Stack Developer
Создать отдельный div под фон формы.
<div class="form-bg"><!-- Этот блок надо растянуть на всю ширину и высоту экрана -->
  <div class="form-close"></div> <!-- Этот блок надо растянуть на всю ширину и высоту родителя. Потом при клике  
                                                  закрывать окно с формой. Якобы закрытие при нажатии на пустое простраство -->
  <div class="form"></div> <!-- Тут внутренности формы -->
</div>
Ответ написан
Добавь к body класс с цветом при открытие формы или сделай подложку с position: fixed
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
box-shadow: 0 0 0 99999px rgba(0,0,0,0.3); для блока с формой.

p.s. и не используйте id для стилизации.
Ответ написан
@nashaev
function ...(){
  //перед появлением формы
  let div_bg = document.createElement('div');
      div_bg.className = 'modal_bg';
     //добавляешь тег на страницу (допиши куда нужно разместить)
     /*дописать ТУТЬ*/.appendChild(div_bg);
  
  //при закрытии формы
  let div_bg = document.querySelector('modal_bg');
      div_bg.remove();
}

.modal_bg{
      display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000ab;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

ну а стили по вкусу на .modal_bg вешай
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы