—»     —»   Создание модальных окон при помощи HTML5 Dialog
  Раздел: CSS/Style Sheets   Нет комментариев  

Создание модальных окон при помощи HTML5 Dialog



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

Создание модальных окон при помощи HTML5 Dialog

До сих пор для создания модального окна мы использовали такие jQuery-плагины как jQuery UI Dialog, Twitter Bootstrap Modal или Popeasy. Однако вместе с HTML5 был представлен новый тег 'dialog', который позволяет нам создавать нативные модальные окна без особого труда.

Применение элемента Dialog

Элемент 'dialog' используется по тому же принципу, что и остальные HTML-элементы. Мы просто добавляем нужный нам контент в диалоговое окно следующим образом:

<dialog id="window">
<h3>Hello World!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
<button id="exit">Exit</button>
</dialog>
<button id="show">Show Dialog</button>

Однако учтите, что когда вы просматриваете этот элемент в Chrome (единственный браузер, который на данный момент поддерживает этот тег), диалоговое окно будет скрыто. И используя вышеприведенную HTML-структуру, мы увидим лишь кнопку Show Dialog. Чтобы отобразить диалоговое окно, мы можем воспользоваться функциями javascript API .show() и .close().

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

Нажмите по кнопке Show Dialog, и тогда перед вами появится предполагаемое окно.

Создание модальных окон при помощи HTML5 Dialog

Оформление такого диалогового окна производится посредством CSS. По умолчанию диалоговое окно закрывает все горизонтальное пространство браузера. Поэтому нам нужно указать его ширину:

dialog {
width: 500px;
}

Более того, элемент 'dialog' предоставляется с новым псевдо-классом ::backdrop. Он используется для стилизации затемненного фона, - эффекта, который часто встречается на сайтах. Это позволяет посетителям сфокусировать внимание на контенте диалогового окна, скрывая все, что находится за его пределами. На данный момент поддержки этого эффекта нет, однако ее следует ожидать в ближайшем времени.

В завершение

Технология HTML в последние пару довольно сильно развилась. Теперь ее можно использовать не только для конструирования веб-страниц, но и для разработки полноценных интерактивных пользовательских интерфейсов при помощи таких новых HTML-элементов как 'dialog', а также за счет применения javascript API. Пожалуйста учтите, что этот элемент экспериментальный, и пока что его нельзя использовать в крупных проектах. К тому же, работать он будет пока что только в Chrome при включенной функции Experimental Features (включить можно на странице chrome://flags).

Посмотреть демо | Скачать исходный код
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS
Опубликовал Design FactoRy   Прочитано (раз): 7327   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Листовки изготовление
Изготовление рекламной продукции. Изготовление пакетов, папок и др
print-27.ru


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031