Простое создание модального окна с помощью HTML5

Модальное окно является одним из наиболее распространенных интерфейсов, которые мы можем найти на веб-сайтах. Он обычно используется для переноса формы подписки, загрузки форм (например, в WordPress), отображения уведомлений и других способов привлечь внимание посетителя к чему-то важному.

Все это время мы используем плагин jQuery, как JQuery UI Диалог, Twitter Bootstrap Модальный, или Popeasy создать один. Но HTML5 ввел новый тег под названием

это позволяет нам создавать собственное модальное окно намного проще.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Использование элемента диалога

Используя

Элемент такой же, как мы используем другие элементы HTML. Мы просто добавляем контент, который хотим отображать в диалоговом окне, вот так.

Привет мир!

Lorem Ipsum Dolor Sit Amet, Заклинатель, жировой элит. Эарум, инвентарь!


Но обратите внимание, что при просмотре в Chrome (который является единственным браузером, который поддерживает этот тег на данный момент) диалоговое окно скрыто. И учитывая приведенную выше структуру HTML, мы увидим только кнопку Показать диалог. Чтобы показать диалоговое окно, мы можем использовать его JavaScript API .show () и использовать .close (), чтобы скрыть его.

(function () {
var dialog = document.getElementById (‘window’);
document.getElementById (‘show’). onclick = function () {
dialog.show ();
};
document.getElementById (‘exit’). onclick = function () {
dialog.close ();
};
}) ();

Нажмите на кнопку «Показать диалог», и диалоговое окно отобразится в середине окна браузера.

Мы можем настроить диалоговое окно с помощью CSS. По умолчанию диалоговое окно охватывает все горизонтальное пространство в браузере. Итак, давайте определим ширину, вот так.

диалог {
ширина: 500 пикселей;
}

Более того,

Элемент поставляется с новым псевдоэлементом, который называется :: фон. Он используется для стилизации того типичного тусклого фона, который мы обычно находим за диалоговым окном. Это позволяет посетителям сосредоточиться на диалоге и скрыть все остальное за ним. В данный момент он не работает, но будет поддерживаться в будущем.

Вывод

HTML сильно изменился за последние пару лет. Это больше не только для создания веб-страницы, мы даже теперь можем создавать интерактивный интерфейс с новыми элементами HTML, такими как

наряду с JavaScript API. Обратите внимание, что этот элемент является экспериментальным, он еще не готов к производству и работает только в Chrome с включенными экспериментальными функциями со страницы chrome: // flags.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *