fapchat
@fapchat

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

https://codepen.io/fapchat2/pen/dybdPRR?editors=0100
Сразу смотрите #gray
  • Вопрос задан
  • 116 просмотров
Решения вопроса 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 вешай
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
Sveak Барнаул
от 50 000 руб.
Star-staff Москва
от 100 000 до 150 000 руб.
16 окт. 2019, в 17:12
300 руб./за проект
16 окт. 2019, в 17:11
3000 руб./за проект
16 окт. 2019, в 17:07
3800 руб./за проект