Часть 1: Введение в элемент диалога.
Подтверждения или модальные окна - один из лучших способов привлечь внимание пользователя. Фактически, они полезны не только для того, чтобы привлечь их внимание, но мы можем пойти дальше и заблокировать их взаимодействие с веб-сайтом до тех пор, пока они не подтвердят само модальное окно.
Любое современное веб-приложение должно использовать модальное окно для информирования пользователей о важной информации. Однако трудно убедить веб-разработчиков использовать модальные окна или уведомления. Большинство из них все еще думают, что они предназначены для мобильных платформ.
Оповещения и уведомления
Модальные окна являются частью предупреждений, хотя вы можете подумать, что они являются частью уведомлений. Между предупреждениями и уведомлениями есть небольшая разница. Итак, вам нужно понимать, когда использовать оповещения, а когда - уведомления.
Оповещения используются, когда происходит что-то важное, и вы должны убедиться, что пользователь это осознает. Вы можете продвинуться дальше, получив часть информации от пользователя при появлении модального окна или предупреждения.
Что касается уведомлений, их можно рассматривать как произошедшие события, но это не настолько важно, чтобы заблокировать пользователя до тех пор, пока он не начнет с ним взаимодействовать.
Собственные модальные окна в HTML
Использование модального окна в HTML было непростой задачей. Это потребовало большой работы - от построения структуры с помощью HTML до стилизации с помощью CSS и управления ее поведением с помощью JavaScript.
Многие библиотеки и фреймворки представили несколько удобных способов использования модальных окон в веб-приложениях, например, Bootstrap.
Модальные окна Bootstrap хороши. Несколько элементов div, несколько классов - и вы получите красивый модальный файл для использования на своем веб-сайте. Однако не все хотят использовать внешнюю библиотеку на своем веб-сайте. С другой стороны, никто не хочет делать дополнительную работу с HTML, CSS и JavaScript только для того, чтобы добавить элемент для улучшения UX.
Спецификация HTML 5.2 решила эту проблему, представив элемент ‹dialog›, и они определили его как часть приложения, с которым пользователь взаимодействует для выполнения задачи. Например, диалоговое окно, инспектор или окно, как показано ниже.
Код на картинке выше очень понятен. Он не содержит никаких новых элементов, кроме элемента диалога. Откройте эту базовую разметку в браузере, и вы увидите пустую страницу. Чтобы открыть элемент диалога, нам нужно добавить код JavaScript в уравнение. Ниже вы найдете полное использование элемента диалога.
Что ж, не пугайтесь. В этом коде нет ничего сложного. Начнем с разметки. Во-первых, у нас есть раздел, содержащий кнопку, совершенно ясно, что мы собираемся использовать эту кнопку, чтобы открыть модальное окно. Во-вторых, у нас есть тег диалога, содержимое внутри него представляет информацию внутри модального окна.
После нажатия этой кнопки появится модальное окно. Здесь на сцену выходит JavaScript. Элемент диалога имеет два метода: showModal () для открытия модального окна и close () для закрытия модального окна. Чтобы использовать их, вам нужно указать модальное окно с классом, идентификатором или чем-то еще, что позволит вам взаимодействовать с DOM.
Мы использовали метод addEventListener () для обработки закрытия или открытия модального окна. Остальной код предназначен для CSS. Мы не использовали его для стилизации, мы просто разместили кнопку посередине и придали ей определенный размер.
Наконец-то
В этой статье мы немного поговорили о модальных окнах и о том, как они относятся к оповещениям. Мы говорили о разнице между уведомлениями и предупреждениями, а затем использовали элемент диалога для создания простого модального окна.
Будем честны. Приведенный выше пример уродлив и не представляет хорошего использования модальных окон или элемента диалога. Итак, в следующей статье мы узнаем, как стилизовать наш модальный код. Одним словом, мы придадим ему красивый вид.
Больше контента на plainenglish.io
