При кодировании всплывающие окна кажутся нормой для большинства веб-сайтов, и кажется, что это будет простым дополнением к CSS-файлам любого пользователя. Именно так вы каждый день регистрируетесь на сайтах, увеличиваете фотографии, а также используете длинный список других ситуаций, когда фокус внимания переключается на что-то на «переднем плане». Перед началом этого учебного процесса передо мной встал вопрос: Как мне начать добавлять элемент, полностью закрывающий, а также отключающий остальные функции страницы? Сначала я подумал, что лучшим вариантом будет наслоение, в частности, по оси «z», но после прочтения этой статьи один вариант показался мне наиболее простым:
Фактический (короткий) процесс
Что мы на самом деле хотим отобразить на нашем DOM? Первый слой начинается со снятия фокуса с содержимого «body» путем затемнения, чтобы позже придать всплывающему окну больше контраста.
<body>
<div id="blur-cover">
<div id="pop-up">
</div>
</div>
</body>
Элементы HTML не являются специфическими, просто включаем «div» для эффекта размытия и еще один для фактического содержимого; окно, которое появится после нажатия на слушателя события.
Первая стилизация, чтобы заставить «div’ы» отображаться с некоторыми качествами, включает в себя:
#blur-cover{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7)
}
#pop-up{
width: 500px;
height: 300px;
background-color: white;
}
Эти строки создадут эффект размытия фона, который теперь является просто полупрозрачным «div», затемнение фона «div» в пределах его полей, а также сплошной белый «div» соответствующего размера, наложенный на картинку-заполнитель, чтобы увидеть глубину:
Затем следует дополнительная стилизация для размещения «div» в нужных местах:
#blur-cover{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: fixed;
top: 0;
justify-content: center;
align-items: center;
display: flex;
}
#pop-up{
width: 500px;
height: 300px;
background-color: white;
border-radius: 15px;
position: absolute;
}
Теперь белое поле находится в центре страницы, даже при прокрутке, а фон является затемненной версией элементов «body». Обратите внимание, что «background-color» #blur-cover установлен как «rgba» со значением непрозрачности 0,7. Если назвать «background-color» чем-то вроде «black», а затем задать «opacity» 0.7, что, похоже, сработает, то прозрачность в 70% будет применена ко всем элементам внутри «div», включая всплывающее окно, чего мы не хотим.
Чтобы объяснить CSS дальше, #blur-cover теперь имеет атрибуты для следующего:
top: 0;
justify-content: center;
align-items: center;
display: flex;
«top», заставляет элемент начинаться с верхней части страницы, «justify-content: center» горизонтально выравнивает дочерний «div» по центру страницы, «align-items: center» вертикально выравнивает его дочерний «div» по центру страницы. «display: flex» работает рука об руку со второй и третьей строками для центрирования «div «ов, где мы обычно видим, как эти три строки используются в комбинации для центрирования элементов.
Добавленный CSS для позиционирования #pop-up «div» довольно прост и наполовину эстетичен: «border-radius», чтобы создать более мягкие края вокруг белого поля, и «position: absolute», чтобы сделать поле статичным даже при прокрутке.
Затем нам нужно назначить кнопку со слушателем событий, чтобы всплывающее окно появлялось при нажатии, а также способ выхода из него.
Создание X:
<div id="pop-up">
<div id="close">+<div>
</div>
Символ «x» не может быть настоящим символом «x», поскольку он не симметричен, поэтому вместо него можно использовать символ «+», а также повернуть его на 45 градусов и расположить на всплывающем окне:
#close{
position: absolute;
top: 0;
cursor: pointer;
font-size: 40px;
transform: rotate(45deg);
right: 14px;
}
Прежде чем продолжить, мы должны сделать всплывающее окно невидимым в DOM по умолчанию, установив еще один атрибут «#blur-cover»:
display: none;
Это будет основой слушателя события, в котором мы будем переключать значение «display» в зависимости от того, нажмем ли мы кнопку всплывающего окна или кнопку «x»:
document.getElementById('btn').addEventListener('click', e => {
e.preventDefault();
document.querySelector('#blur-cover').style.display = 'flex';
})
document.querySelector('#close').addEventListener('click', e => {
e.preventDefault();
document.querySelector('#blur-cover').style.display = 'none';
})
После этого мы создадим первые пару строк JavaScript, чтобы любая кнопка функционально вызывала появление всплывающего окна.
Закрытие
Моей основной целью изучения этого курса было совершенствование в CSS, и этот вопрос, который я решил, всегда был у меня на задворках сознания. Это также улучшило то, как я решаю проблемы с CSS, осознав, что я мог бы сделать это с предыдущим опытом и знаниями, если бы только подумал, как их применить. Всегда есть место для совершенствования. Спасибо за прочтение!