Всплывающие окна вездесущи в Интернете, но не все они плохие. Узнайте, как создать хорошо работающее всплывающее окно с помощью стандартных веб-технологий.
Хорошо продуманные всплывающие окна сделают ваш сайт более интерактивным и современным. Они могут создавать рынки и увеличивать продажи для бизнеса.
Вы можете создавать всплывающие окна с помощью HTML, CSS и JavaScript. Используйте следующее руководство, чтобы создать и оформить всплывающее окно с нуля. Это делает ваш сайт интерактивным и создает отличный пользовательский опыт.
Напишите HTML для структурирования контента
Давайте напишем HTML-код со скрытым модальным окном, которое появляется при нажатии кнопки. В этом случае вы отобразите значение слова Привет! Всплывающее окно будет иметь заголовок и некоторый контент.
Сразу же после запуска модального окна на фон накладывается эффект размытия. Добавьте классы в разделы, которые вы будете использовать для выбора модального окна позже в JavaScript.
<тело>
<кнопкасорт="открытый модальный">Привет!кнопка><дивсорт="модальный-контент скрыто-модальный">
<дивсорт="модальный заголовок">
<h3>Значение Привет!h3>
<кнопкасорт="близко-модальный">×кнопка>
див><дивсорт="модальное тело">
<п>Hello — это приветствие на английском языке. Он используется в
начало предложения как введение лично или
на телефоне.п>
див>
див>
<дивсорт="размытие-bg скрытое-размытие">див>
<сценарийисточник="скрипт.js">сценарий>
тело>
Страница должна выглядеть так:
Вы также можете исследовать HTML-элемент диалога если вы хотите использовать наиболее семантическую разметку.
Напишите CSS, чтобы добавить стиль
Используйте CSS для форматирования всплывающего окна. Разместите окно в центре веб-страницы на черном фоне, чтобы оно было хорошо видно. Вы также зададите стиль окну, его фону и размеру шрифта.
Во-первых, создайте единый стиль для всей страницы, установив поля, отступы и высоту строки. Затем выровняйте элементы тела по центру заднего фона.
* {
допуск: 0;
набивка: 0;
размер коробки: пограничный ящик;
высота линии: 1;
}
тело {
высота: 100%;
отображать: сгибать;
выравнивание содержания: центр;
flex-направление: столбец;
выравнивание элементов: центр;
фон: #000;
зазор: 30пикс.;
}
Далее стилизуйте открытый модальный кнопка. Дайте ему цвет фона, отличный от остальной части страницы, чтобы он выделялся. Кроме того, установите цвет шрифта, размер, отступы и время перехода.
.открытый модальный {
фон: #20c997;
цвет: #ффф;
граница: никто;
набивка: 20пикс. 40пикс.;
размер шрифта: 48пикс.;
радиус границы: 100пикс.;
курсор: указатель;
переход: все 0.3с;
контур: никто;
}
.открытый модальный: активный {
трансформировать: перевестиY(-17px);
}
Затем настройте модальное содержимое, которое будет отображаться при открытии окна. Установите белый фон, задайте ему меньшую ширину, чем тело, и добавьте отступы.
Также присвойте ему z-индекс, чтобы он отображался перед открытый модальный кнопка. Кроме того, установите скрыто-модальный отображается как none, поэтому он остается скрытым, пока вы его не активируете.
.modal-контент {
фон: #ccc;
ширина: 500пикс.;
набивка: 20пикс.;
радиус границы: 10пикс.;
z-индекс: 99;
}.modal-заголовок {
отображать: сгибать;
выравнивание содержания: пространство между;
нижняя граница: 16пикс.;
цвет: #000;
размер шрифта: 30пикс.;
}.modal-телоп {
размер шрифта: 22пикс.;
высота линии: 1.5;
}
.скрытый модальный {
отображать: никто;
}
Затем стилизуйте близкий модальный кнопку с прозрачным фоном и выровняйте ее по центру.
.close-modal {
фон: прозрачный;
граница: никто;
отображать: сгибать;
выравнивание элементов: центр;
выравнивание содержания: центр;
высота: 20пикс.;
ширина: 20пикс.;
размер шрифта: 40пикс.;
}
.close-modal:наведите {
цвет: #fa5252;
}
Наконец, стилизуйте элемент размытия, который будет отображаться на фоне при открытии окна. Он будет иметь максимальную высоту и ширину и фоновый фильтр. Установите размытие как нет, чтобы оно не было видно, пока не откроется окно.
.blur-bg {
позиция: абсолютный;
вершина: 0;
левый: 0;
высота: 100%;
ширина: 100%;
фон: RGBA(0, 0, 0, 0.3);
фоновый фильтр: размытие(5пикс.);
}.скрытое размытие {
отображать: никто;
}
После добавления CSS страница должна выглядеть так:
Управление всплывающим окном с помощью кода JavaScript
Вы будете использовать JavaScript, чтобы открывать и закрывать модальное окно, показывая или скрывая его. Добавлять прослушиватели событий на кнопку, чтобы она открывалась и закрывалась при нажатии на нее.
Сначала выберите соответствующие элементы, используя классы CSS, которые вы определили в HTML:
позволять модальное содержимое = документ.querySelector(".modal-контент");
позволять openModal = документ.querySelector(".open-модальный");
позволять близкомодальный = документ.querySelector(".close-модальный");
позволять размытиеBg = документ.querySelector(".blur-bg");Добавьте прослушиватель событий в открытый модальный кнопку так, чтобы она открывала окно при нажатии на нее.
openModal.addEventListener("щелкнуть", функция () {
modalContent.classList.remove("скрытый модальный");
blurBg.classList.remove("скрытое размытие");
});Выполните противоположные действия, чтобы обработать закрытие всплывающего окна, но на этот раз оберните их в именованную функцию. Это будет обрабатывать поведение для нескольких событий, которые могут привести к закрытию модального окна:
позволять closeModalFunction = функция () {
modalContent.classList.add("скрытый модальный")
blurBg.classList.add("скрытое размытие")
}Добавьте прослушиватели событий для обработки щелчков по фоновой кнопке или кнопке закрытия, а также случая, когда пользователь нажимает клавишу Escape.
blurBg.addEventListener("щелкнуть", закрытьModalFunction);
closeModal.addEventListener("щелкнуть", закрытьModalFunction);
документ.addEventListener("нажатие клавиши", функция (событие) {
если (событие.ключ "Побег"
&& !modalContent.classList.contains("скрытый")
) {
закрытьмодальную функцию();
}
});
Теперь, когда вы нажимаете на Привет! кнопка, появится модальное окно. Вы можете закрыть его, нажав кнопку отмены в правой части окна. Смотрите код на codepen.io и взаимодействуйте с модальным:
Использование всплывающих окон
Основное использование всплывающих/модальных окон в веб-разработке заключается в привлечении внимания к определенному элементу на веб-сайте. После запуска он деактивирует остальную часть страницы, побуждая пользователя обратить на нее внимание.
Всплывающие окна оживляют ваш пользовательский интерфейс. Они могут предупреждать и привлекать внимание пользователей к важной информации на веб-странице. Чтобы удалить окно, пользователь должен выполнить какое-то действие. Таким образом, пользователь взаимодействует с окном и получает нужную информацию.
