Простой способ создать диалоговое окно на странице
Пока мы ждали новые продукты от Apple, новые продукты появились в стандартах веба. А это куда важнее: макбуки каждый раз примерно одинаковые, а возможности вашего браузера меняются существенно.
Сегодня говорим о новом элементе в спецификациях HTML — Dialog. Это новый нативный способ показывать диалоговые и модальные окна с корректной обработкой фокуса, управлением с клавиатуры и другими приятными вещами.
Какой такой диалог?
На сайтах есть два вида всплывающих окон — диалоговое и модальное.
- Диалоговое окно спрашивает что-то у пользователя, но не мешает ему пользоваться сайтом дальше.
- Модальное окно перетягивает на себя всё внимание и не даёт работать со страницей, пока ты не сделаешь то, что нужно этому окну, и не закроешь его.
Раньше, чтобы сделать такое окно, нужно было писать много кода: оформлять стили и прописывать в них поведение окна. Сейчас это можно сделать одним HTML-тегом и парой параметров.
Для наглядности возьмём настоящий код из нашего проекта с игрой «Найди пару». Сначала мы добавляли модальное окно на страницу и писали там замысловатую структуру из тегов:
Потом описывали характеристики и поведение каждого блока в стилях, чтобы они превратились в окно и работали так, как нам нужно:
/* настройки затемнения при выводе модального окна */ .modal-overlay < /* затемняем экран */ background: rgba(0, 0, 0, 0.8); /* располагаем окно по центру экрана */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; >/* настройки модального окна */ .modal < position: relative; width: 500px; height: 300px; max-height: 90%; max-width: 90%; min-height: 380px; margin: 0 auto; background: white; top: 50%; transform: translateY(-50%); padding: 30px 10px; >/* настройки шрифта сообщения о победе */ .modal .winner < font-size: 80px; text-align: center; color: #4d4d4d; text-shadow: 0px 3px 0 black; >/* если ширина окна маленькая, делаем шрифт поменьше */ @media (max-width: 480px) < .modal .winner < font-size: 60px; >> /* настройки кнопки перезапуска игры */ .modal .restart < margin: 30px auto; padding: 20px 30px; display: block; font-size: 30px; border: none; background: #4d4d4d; background: linear-gradient(#4d4d4d, #222); border: 1px solid #222; border-radius: 5px; color: white; text-shadow: 0px 1px 0 black; cursor: pointer; >/* меняем фон при наведении мышки на кнопку */ .modal .restart:hover < background: linear-gradient(#222, black); >/* выравниваем надписи на модальном окне по центру */ .modal .message
В итоге получалось такое модальное окно с кнопкой, которое висит поверх всей страницы и предлагает сыграть ещё. Код рабочий, но очень громоздкий и сложный. Но модальные и диалоговые окна нужны всем, поэтому в HTML5 добавили поддержку нового тега — .
Новое решение — использовать тег
Тег позволяет создавать диалоговые и модальные окна намного проще, чем раньше. Идея в том, что мы внутри этого тега прописываем сразу всё, что нам нужно на экране, а потом вызываем его, например, по нажатию на кнопку.
Допустим, мы хотим, чтобы у нас на странице было диалоговое окно с объяснением про типы данных. Для этого сначала добавим кнопку — окно появится, когда мы на неё нажмём:
Теперь ниже сразу напишем новый тег , в котором сделаем объяснение про типы данных:
И теперь добавим простой скрипт в конец страницы, который покажет это диалоговое окно. Для этого будем использовать функцию document.querySelector() — это встроенная JavaScript-функция, которая не требует подключения внешних библиотек:
var dialog = document.querySelector('dialog') // выводим диалоговое окно document.querySelector('#open').onclick = function () Мы только что сделали модальное окно, не используя сложную систему блоков и вообще не используя CSS-код. Единственный минус этого окна — его невозможно закрыть. Исправим это и добавим внутрь тега в самом конце кнопку закрытия:
Теперь добавим в скрипт команду закрытия диалогового окна и привяжем её к новой кнопке:
// скрываем окно document.querySelector('#close').onclick = function () Настраиваем стили
Когда мы используем тег , то стили нам нужны не для создания окна, а для обычной настройки его внешнего вида. Например, если мы хотим добавить скругления, отступы по краям и поменять фон и убрать рамку, достаточно добавить такой стиль:
Теперь диалоговое окно выглядит аккуратнее:
Модальное окно
Модальное окно не даёт работать со страницей до тех пор, пока его не закроешь (а диалоговое — даёт). Чтобы превратить обычное диалоговое окно в модальное, достаточно в скрипте изменить команду show() на showModal():
// выводим модальное окно
document.querySelector(‘#open’).onclick = function () dialog.showModal()
>
Ещё немного поправим стили, чтобы модальное окно получилось по центру страницы:
Зачем это нужно
Новые команды в вёрстке — это способ сэкономить время и силы на написание и отладку кода. Чем проще код, тем проще с ним работать и поддерживать в дальнейшем. Можно писать всё по старинке, вручную, а можно освоить новые команды и делать всё проще и быстрее.
dialog Фронтендеры — те люди, которые программируют всплывающие окна за большие деньги. На новом курсе «Практикума» о фронтенде вас обучат самым востребованным технологиям. Старт — бесплатно.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Противная и неочевидная ошибка, которую очень легко исправить.
Максимально просто и быстро
Иногда это и правда нужно.
Ставим RustDesk на компьютер и сервер
Она может предсказать что угодно, если правильно её настроить.
Тег HTML5 Dialog: самый простой способ создать модальное окно.
Тег диалога HTML5 — это самый простой способ создать модальное окно. Все, что вам нужно сделать, это добавить тег на свою страницу, и все готово. Затем вы можете стилизовать диалоговое окно с помощью CSS и добавить к нему поведение с помощью JavaScript.
Что такое тег dialog в html?
Тег в HTML используется для создания всплывающего диалогового окна на веб-странице.
Тег определяет диалоговое окно или окно. Этот элемент можно использовать для отображения предупреждающего сообщения, подтверждающего сообщения или всего, что требует от пользователя ответа.
Давайте посмотрим на небольшой пример
- Сначала создадим 3 файла: index.html, main.js и style.css.
- В index.html напишите этот код:
const btnOpen = document.querySelector("#btn-open"); const btnClose = document.querySelector("#btn-close") const modal = document.querySelector("#modal"); btnOpen.onclick = () => < modal.showModal() >btnClose.onclick = () => dialog::backdrop < background-color: rgba(0 0 0 / .3); >dialog < width: 20%; border: none; border-radius: 14px; box-shadow: 0 0 0 .6em rgb( 0 0 0 / .3) >.btn-open < position:absolute; margin: 25% auto 0; left:45%; background-color: #8e2ddd; color: #fff; border: none; border-radius: 14px; padding: 1.5em; font-size: 18px; font-weight: bold; cursor: pointer >.btn-close
В статье мы рассмотрели, как сделать нашу страницу сайта более интересней с помощью всплывающего диалогового окна