Как сделать всплывающее окно в html
Для создания всплывающего окна в HTML можно использовать тег и стили CSS.
- Сначала создадим блок , который будет содержать всплывающее окно:
class="popup"> - Добавим стили для этого блока. С помощью CSS зададим ему размеры, позицию, цвет фона и прозрачность:
.popup position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border: 1px solid #000; opacity: 1; z-index: 9999; > - Добавим кнопку, при нажатии на которую будет открываться всплывающее окно:
onclick="openPopup()">Открыть всплывающее окно - Создадим функцию openPopup() , которая будет открывать всплывающее окно. В этой функции мы будем получать доступ к блоку и задавать ему свойство display: block; , чтобы он стал видимым:
function openPopup() var popup = document.querySelector('.popup'); popup.style.display = 'block'; > - Для того чтобы закрыть всплывающее окно, добавим кнопку «закрыть» и функцию closePopup() , которая будет скрывать блок :
class="popup"> onclick="closePopup()">Закрыть function closePopup() var popup = document.querySelector('.popup'); popup.style.display = 'none'; > Как сделать всплывающее окно в html
Тег для создания всплывающего окна без боли и страданий.
Время чтения: 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Татьяна Фокина ,
- Светлана Коробцева
Обновлено 8 ноября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег создаёт всплывающее окно или диалог. По умолчанию не показывается на странице.
Может открываться в двух режимах:
- Всплывающее окно — не блокирует взаимодействие со страницей.
- Модальное окно — откроется поверх страницы, имеет фоновое затемнение, остальной контент не доступен для взаимодействия.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Парный тег < / dialog>, внутри которого находится содержимое всплывающего окна. У нельзя использовать атрибут tabindex .
Привет, мир!dialog> Привет, мир! dialog>
Как открыть
Скопировать ссылку «Как открыть» Скопировано
Я виден. Привет! �� Я скрыт от пользователя ��dialog open> Я виден. Привет! �� dialog> dialog> Я скрыт от пользователя �� dialog>
Также окно можно открыть с помощью JavaScript-методов:
- show ( ) — добавляет атрибуты open и aria — modal = «false» .
- show Modal ( ) — открывает в режиме «модального окна». Добавляет атрибуты open и aria — modal = «true» . Появляется подложка в виде псевдоэлемента : : backdrop , который можно стилизовать.
Просто открыть Открыть как модалкуbutton type="button" onclick="window.myDialog.show()"> Просто открыть button> button type="button" onclick="window.myDialog.showModal()"> Открыть как модалку button> dialog id="myDialog">�� Живи долго и процветай!dialog>
Как закрыть
Скопировать ссылку «Как закрыть» Скопировано
- Из JavaScript с помощью метода close ( ) .
- Из HTML по событию submit (например по нажатию кнопки ), если в есть тег с атрибутом method = «dialog» .
Закрой меня! ��
Результат этих кнопок одинаковый.
Закрыть с помощью JavaScript он будет type="submit" ! --> Закрыть с помощью формыdialog open="open" id="closeMe"> h2>Закрой меня! ��h2> p>Результат этих кнопок одинаковый.p> button type="button" onclick="window.closeMe.close()"> Закрыть с помощью JavaScript button> form method="dialog"> button> Закрыть с помощью формы button> form> dialog>
Возвращаемое значение
Скопировать ссылку «Возвращаемое значение» Скопировано
Если кнопкам в форме задать value , то при закрытии диалога это значение будет присваиваться dialog . return Value .
Присвоим двум кнопкам разные значения:
Дави его! Каждая жизнь священнаform class="options" method="dialog"> button class="button button--dark" value="debug"> Дави его! button> button class="button button--light" value="reproduction"> Каждая жизнь священна button> form>
Если всплывающее окно закрыто по кнопке Дави его! , то количество �� уменьшается. А если по кнопке Каждая жизнь священна , то увеличивается:
if (dialog.returnValue === "debug") bugs.innerText = bugs.innerText.substring(0, bugs.innerText.length - 2)> else bugs.innerText += "��">if (dialog.returnValue === "debug") bugs.innerText = bugs.innerText.substring(0, bugs.innerText.length - 2) > else bugs.innerText += "��" >
Как понять
Скопировать ссылку «Как понять» Скопировано
Долгое время в HTML не существовало тега для создания всплывающих окон. Если такая задача возникала, то использовались либо самописные решения для красивых попапов, либо JavaScript-методы alert ( ) , prompt ( ) и confirm ( ) , если красота была не важна.
Тег появился как альтернатива. Хорошее диалоговое окно — это не просто логика «Показать» и «Скрыть». В реализовано то, о чём часто забывают:
- Для вспомогательных технологий — аналог role = «dialog» . Если окно открыто в режиме модального, то и аналог aria — modal = «true» . Также у тега есть aria — live = «assertive» , поэтому скринридеры сразу же зачитывают его содержимое.
- Модальные диалоги закрываются по нажатию на Esc .
- У модального диалога при открытии появляется «ловушка фокуса»: для клавиатурной навигации доступны только интерактивные элементы только текущего диалога.
- Браузер запоминает какой элемент был в фокусе до открытия окна и после закрытия окна снова переводит его в фокус.
Вся это логика реализована в самом браузере «из коробки». А значит пользователю не отправляется лишний трафик.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Google Chrome при закрытии модального окна клавишей Esc ставит предыдущий элемент не просто в :focus , а в :focus — visible . Подразумевая, что пользователь перешёл на клавиатурную навигацию.
�� По нажатию Esc сначала запускается событие cancel , а затем close . Это может быть полезно, если мы хотим отгородить пользователя от случайного нажатия клавиши, сначала предупредив, что изменённые данные не сохранятся, и только при повторном нажатии закрывать окно.
�� Контент по умолчанию скрыт с помощью display : none . Можно переписать это поведение в стилях и анимировать открытие и закрытие. Намного легче, чем аналогичная задача в например.
�� Модальные окна «ускользают» от контекста: даже если в HTML-разметке после модального окна указан тег с z — index : 99999 , то модальное окно всё равно отобразится поверх этого . Или если родитель наклонён с помощью skew ( ) , то дочернее модальное окно всё равно откроется без наклона.
На практике
Скопировать ссылку «На практике» Скопировано
Артур Бэйлис Ли советует
Скопировать ссылку «Артур Бэйлис Ли советует» Скопировано
Блокируем скролл
Скопировать ссылку «Блокируем скролл» Скопировано
Несмотря на то, что модального окно перекрывает весь остальной контент на странице с помощью псевдоэлемента : : backdrop , вся остальная страница всё равно доступна для прокрутки. Это может смущать пользователя, если на заднем плане будет что-то мельтешить.
Так же с помощью scrollbar — gutter можно «зарезервировать» место под скролл, чтобы контент не прыгал при его исчезновении скроллбара.
html,body scrollbar-gutter: stable;>html, body scrollbar-gutter: stable; >
Не забываем так же вернуть всё как было, при закрытии.
dialogOpener.addEventListener("click", openModalAndLockScroll)dialog.addEventListener("close", returnScroll) function openModalAndLockScroll() dialog.showModal() document.body.classList.add("scroll-lock")> function returnScroll() document.body.classList.remove("scroll-lock")>dialogOpener.addEventListener("click", openModalAndLockScroll) dialog.addEventListener("close", returnScroll) function openModalAndLockScroll() dialog.showModal() document.body.classList.add("scroll-lock") > function returnScroll() document.body.classList.remove("scroll-lock") >
Закрываем по клику на : : backdrop
Скопировать ссылку «Закрываем по клику на ::backdrop» Скопировано
Частый UX-сценарий, что модальное окно закрывается по клику на подложку (оверлей). Поскольку для подложкой является псевдоэлемент : : backdrop , то просто навесить на него обработчик клика не выйдет.
Однако клик по : : backdrop считается и кликом по самому элементу . Значит можно обернуть весь контент модального окна в обёртку и отлавливать когда клик проходит по самому диалогу, а когда по контенту в нём.
Содержимое диалогаdialog class="dialog"> div class="dialog__wrapper"> Содержимое диалога div> dialog>
У элемента диалога есть стандартные браузерные отступы и обводка. А значит их нужно обнулить и поставить на обёртку, чтобы она перекрывала всю «полезную область окна». Иначе клики по отступам тоже будут закрывать модальное окно.
.dialog border: none; padding: 0;> .dialog__wrapper padding: 1em;>.dialog border: none; padding: 0; > .dialog__wrapper padding: 1em; >
Теперь на элемент диалога мы можем добавить обработчик клика. Если пользователь нажал на подложку, то current Target будет совпадать с target . В противном случае, клик пошёл на дочерний DOM-узел, который и будет target .
dialogElement.addEventListener("click", closeOnBackDropClick) function closeOnBackDropClick(< currentTarget, target >) const dialogElement = currentTarget const isClickedOnBackDrop = target === dialogElement if (isClickedOnBackDrop) dialogElement.close() >>dialogElement.addEventListener("click", closeOnBackDropClick) function closeOnBackDropClick( currentTarget, target >) const dialogElement = currentTarget const isClickedOnBackDrop = target === dialogElement if (isClickedOnBackDrop) dialogElement.close() > >
⚠️ Помните, что клик по подложке это вспомогательный способ закрытия. Если ваш дизайнер не нарисовал явный элемент для закрытия, то убедите его это сделать. Ну или убедите себя, если вы сам дизайнер.
Закрываем диалог по клику по свободной области
Скопировать ссылку «Закрываем диалог по клику по свободной области» Скопировано
Этот пример похож на предыдущий, только теперь по отслеживаем клики по всему документу и проверяем был ли кликнут диалог или его потомок. Если оба случая неверны, значит клик прошёл вне диалога и его можно закрыть.
function closeDialogOnOutsideClick(< target >) const isClickOnDialog = target === dialogElement const isClickOnDialogChildrenNodes = dialogElement.contains(target) const isClickOutsideOfDialog = !( isClickOnDialog || isClickOnDialogChildrenNodes ) if (isClickOutsideOfDialog) dialogElement.close() >>function closeDialogOnOutsideClick( target >) const isClickOnDialog = target === dialogElement const isClickOnDialogChildrenNodes = dialogElement.contains(target) const isClickOutsideOfDialog = !( isClickOnDialog || isClickOnDialogChildrenNodes ) if (isClickOutsideOfDialog) dialogElement.close() > >
Расширяем браузерную поддержку
Скопировать ссылку «Расширяем браузерную поддержку» Скопировано
По данным Can I Use, Firefox и Safari начали поддерживать только в марте 2022 года. Для продакшена большинства проектов, по крайней мере ближайшие несколько лет, нужно поддерживать и более старые версии браузеров. Что делать? Отказываться от такого удобного элемента?
К счастью, команда Google Chrome давно разработала полифил, который имитирует работу в старых браузерах. Всё что нужно это подключить скрипт и дополнительные стили.
Но стойте! Неужели ≈ 3 /4 наших пользователей придётся грузить скрипт, который им вообще не нужен? Получается, одно из главных преимуществ нативных диалоговых окон сразу отпадает. А если из-за полифила эти нативные окна будут работать нестабильно?
К счастью, этих проблем можно избежать с помощью динамического импорта:
/** * В реальных проектах мы бы брали полифил из Node пакета. * Но для примера воспользуемся CDN**/const dialogPolyfillURL = "https://esm.run/dialog-polyfill" const isBrowserNotSupportDialog = window.HTMLDialogElement === undefined /** * Подключаем полифил к каждому dialog на странице, * если в браузере нет поддержки**/if (isBrowserNotSupportDialog) const dialogs = document.querySelectorAll("dialog") dialogs.forEach(async (dialog) => const < default: polyfill >= await import(dialogPolyfillURL) polyfill.registerDialog(dialog) >)>/** * В реальных проектах мы бы брали полифил из Node пакета. * Но для примера воспользуемся CDN **/ const dialogPolyfillURL = "https://esm.run/dialog-polyfill" const isBrowserNotSupportDialog = window.HTMLDialogElement === undefined /** * Подключаем полифил к каждому dialog на странице, * если в браузере нет поддержки **/ if (isBrowserNotSupportDialog) const dialogs = document.querySelectorAll("dialog") dialogs.forEach(async (dialog) => const default: polyfill > = await import(dialogPolyfillURL) polyfill.registerDialog(dialog) >) >
Помимо скрипта нужно написать и стили. Вы можете, как просто взять из того же репозитория с полифилом, либо сразу адаптировать под себя.
Обратите внимание, что скрипт полифила не может создать псевдоэлемент : : backdrop , поэтому стили для него вам нужно дублировать и для с классом .backdrop .
dialog::backdrop background-color: rgb(0 0 0 / 70%);> dialog + .backdrop background-color: rgb(0 0 0 / 70%);>dialog::backdrop background-color: rgb(0 0 0 / 70%); > dialog + .backdrop background-color: rgb(0 0 0 / 70%); >
Как создать всплывающие окна (pop-up) на сайте
Узнайте, как создать всплывающие окна (pop-up) на вашем сайте с помощью HTML, CSS и JavaScript в этой практической статье для новичков!
Алексей Кодов
Автор статьи
2 июня 2023 в 10:31
Всплывающие окна, или pop-up, – это небольшие диалоговые окна, которые появляются поверх основного содержимого страницы. Они могут использоваться для различных целей, таких как отображение уведомлений, предложение подписки на рассылку или предоставление дополнительной информации. В этой статье мы рассмотрим, как создать всплывающие окна с использованием HTML, CSS и JavaScript.
HTML
Для начала нам нужно создать базовую разметку для всплывающего окна. Сначала создадим контейнер, который будет затемнять фон страницы и содержать само всплывающее окно:
CSS
Теперь добавим стили для затемнения фона и отображения всплывающего окна:
#popup-overlay < position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; >#popup
По умолчанию контейнер с всплывающим окном скрыт с помощью display: none; . Мы изменим это свойство на display: block; , когда захотим показать всплывающее окно.
JavaScript
Чтобы показать и скрыть всплывающее окно, добавим следующий код JavaScript:
const popupOverlay = document.getElementById("popup-overlay"); const popup = document.getElementById("popup"); function showPopup() < popupOverlay.style.display = "block"; >function hidePopup() < popupOverlay.style.display = "none"; >popupOverlay.addEventListener("click", hidePopup); popup.addEventListener("click", (event) => event.stopPropagation());
Функция showPopup делает всплывающее окно видимым, а функция hidePopup – скрывает его. Мы также добавили обработчик событий, чтобы при клике на затемненный фон всплывающее окно закрывалось.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Пример использования
Теперь, когда у нас есть код для работы с всплывающими окнами, давайте добавим кнопку на страницу, чтобы открыть окно, и добавим содержимое внутрь всплывающего окна:
Пример всплывающего окна
Это пример всплывающего окна с использованием HTML, CSS и JavaScript. ��
Теперь, когда пользователь нажимает на кнопку «Открыть всплывающее окно», появляется всплывающее окно, а при нажатии на кнопку «Закрыть окно» или вне всплывающего окна, оно закрывается.
Вот так просто можно создать всплывающие окна на сайте. Надеюсь, этот материал помог вам разобраться в теме! ��
Как создать всплывающие окна (pop-up) на сайте
Узнайте, как создать всплывающие окна (pop-up) на вашем сайте с помощью HTML, CSS и JavaScript-библиотек в нашей практической статье!
Алексей Кодов
Автор статьи
1 июня 2023 в 15:38
Всплывающие окна, или pop-up, являются распространенным элементом на многих сайтах. Они могут использоваться для различных целей, таких как отображение рекламы, сбор информации или привлечение внимания пользователей. В этой статье мы рассмотрим основные методы создания всплывающих окон на вашем сайте.
HTML и CSS
Самый простой способ создания всплывающего окна – использование HTML и CSS. Создайте отдельный блок с содержимым всплывающего окна и добавьте стили для его позиционирования и отображения.
<!DOCTYPE html> <html> <head> <style> .popup < display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 2px solid black; padding: 20px; z-index: 10; >.overlay < display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 5; ></style> </head> <body> <button onclick="showPopup()">Открыть всплывающее окно</button> <div onclick="hidePopup()"></div> <div <h2>Всплывающее окно</h2> <p>Текст всплывающего окна.</p> </div> <script> function showPopup() < document.querySelector('.overlay').style.display = 'block'; document.querySelector('.popup').style.display = 'block'; >function hidePopup() < document.querySelector('.overlay').style.display = 'none'; document.querySelector('.popup').style.display = 'none'; ></script> </body> </html>
В этом примере мы создали всплывающее окно с классом popup и полупрозрачный фон с классом overlay . Для открытия и закрытия окна используются функции showPopup() и hidePopup() .
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
JavaScript-библиотеки
Если вы хотите использовать более продвинутые функции всплывающих окон, можно воспользоваться специализированными JavaScript-библиотеками. Одна из популярных библиотек для создания всплывающих окон – Magnific Popup.
Пример использования Magnific Popup:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <style> .mfp-content < width: 300px; background-color: white; border: 2px solid black; padding: 20px; ></style> </head> <body> <button всплывающее окно</button> <div <h2>Всплывающее окно</h2> <p>Текст всплывающего окна.</p> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <script> $(document).ready(function() < $('.open-popup').magnificPopup(< type: 'inline', midClick: true, items: < src: '#popup' >>); >); </script> </body> </html>
В этом примере мы подключили стили и скрипты Magnific Popup, а также использовали класс open-popup для открытия всплывающего окна с содержимым блока с ID popup .
�� Теперь вы знаете основные методы создания всплывающих окон на вашем сайте. Удачи вам в веб-разработке! И не забудьте присмотреться к замечательной школе, которая хорошо учит «Веб-разработка» –