HTML5 dialog в документе. Создания диалоговых окон на чистом HTML5

Элемент HTML5 dialog обеспечивает выполнение функции в диалоговом окне на веб-странице. Диалоговое окно элемента dialog находится в дереве DOM, и может быть оформлен с помощью обычных CSS.

Простые примеры элемента dialog Окно диалога! Сам по себе элемент dialog визуально ни чего не покажет, нужно использовать JavaScript API, чтобы открыть и закрыть диалоговое окно. .show() и.close() API С помощью.show() и.close() API для элемента dialog DOM, можно открыть и закрыть диалоговое окно.

Окно диалога!

Закрыть Open Dialog! var dialog = document.querySelector("dialog"); document.querySelector("#show").onclick = function() { dialog.show(); }; document.querySelector("#close").onclick = function() { dialog.close(); };

Окно диалога!

Закрыть Открыть диалоговое окно!

Стиль для диалогового окна Добавить произвольный стиль к элементу dialog, можно так же как и к другим элементам блока: nav, div, footer и т.д. dialog { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }

Стили для элемента dialog так же легко как и для div !

Закрыть Открыть диалоговое окно со стилями

Функция.showModal() API

Что бы сделать диалоговое окно модальным, нужно вызвать функцию.showModal() вместо.show() . Заметьте, вы не можете выделить текст в фоновом режиме или нажать кнопку для выбора кнопок в открытом диалоговом окне.

Document.querySelector("#show").onclick = function() { dialog.showModal(); };

Этот слой поверх окон других элементов, независимо от значений z-index , в том числе ранее открытых модальных диалоговых окон.

При необходимости можно закрыть модальное диалоговое окно, с помощью ключа «escape»!

Закрыть

Добавление фона для диалогового окна

Что бы залить фон цветом, можно использовать псевдо-элемент::backdrop .

Dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); }

Тусклый фон, с использованием::backdrop . Он выделяет диалоговое окно скрывая остальное!

Закрыть Открыть диалоговое окно с фоном

Возврат значений из диалогового окна

Вы можете передать аргумент для.close() . Диалоговое окно возвращает заданное значение свойства.returnValue .

Открыть диалог!

Отправить Открыть диалог! document.querySelector("#close").onclick = function() { var value = document.querySelector("#return_value").value; dialog.close(value); }; document.querySelector("dialog").addEventListener("close", function() { alert(this.returnValue); })

Диалоговое окно получает аргумент close(). Это будет отражено в.returnValue

Отправить Открыть диалог Преимущества элемента Конечно, можно использовать библиотеку jQuery или другие JavaScript для получения такого результата. Но dialog является элементом HTML и для него не нужно подключать сторонние библиотеки что бы сделать всплывающее диалоговое окно.

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

Кроме того, модальные диалоги размещаются вполне упорядоченно в стек «верхний слой», и находится по верх других элементов, независимо от свойств z-index . Опираясь на z-index разместить модальный диалог на вершине веб-страниц, сложно.

Позиционировать

Диалоги имеют какое-то особые характеристики позиционирования. По умолчанию когда вы вызываете dialog.show() диалоговое окно располагается по центру окна просмотра. Конечно, вы можете изменить это, используя обычные позиционирование в CSS, например top: 15px .

И, еще нужно знать, что абсолютное позиционирование диалогового окна, только для блока содержащего начальный контейнер. Поэтому абсолютное позиционированное диалоговое окно не понимает такие вещи, как position, overflow, и проценты.

Спецификация включает в себя якорь позиционирования, который позволяет закрепить диалог с другим элементом. Однако, пока что это не реализовано в Chrome.

Открыть несколько окон диалога

Если диалоги не модальные, они ведут себя как несколько элементов . Для модальных браузер откладывает диалоговое окно в стек. Вершина стека является активно модальное диалоговое окно, которое блокирует остальные страницы документа. Всякий раз, когда модальное диалоговое окно открыто, оно помещается на вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, поэтому активный диалог является самым высоким.

Многие процессы в вебе на сегодняшний день требуют согласия пользователя для своего завершения. Например, пользователям может понадобиться удалить аккаунт, сменить имя или подтвердить денежную операцию.

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

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

появился в HTML5 (в 5.1 если точнее). Он классифицируется как "корневой секционный" элемент, так же как и элементы , и каждый из которых устанавливает новый независимый блок с контентом. Вы можете разместить его как дочерний к body элемент или же использовать наподобие или – оба этих подхода правильные.

Поддерживающие браузеры (Chrome 37+ и Opera 27+) по умолчанию будут показывать элемент скрытым, делая его видимым при вызове show() или showModal() , а также close() чтобы снова скрыть его. Как правило, мы будем запускать этот метод при срабатывании события click , вот так:

Var $accountDelete = $("#delete-account"), $accountDeleteDialog = $("#confirm-delete"); $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); }); $("#cancel").on("click", function() { $accountDeleteDialog.close(); });

Отличия между методами show() и showModal()

Стоит отметить, что методы show() и showModal() ведут себя по-разному.

Метод show() открывает диалог в соответствии с его положением внутри DOM. Если вы добавили его непосредственно перед , он появится внизу страницы. Нам пришлось бы добавлять кастомные стили например для позиционирования диалога в центр страницы. Эти стили обычно используют для показа элемента выше других, выставляется свойство position в absolute , вместе с left и top .

Метод showModal() напротив покажет элемент как модальное окно. Оно будет отображаться по центру страницы, располагается в верхнем слое, как в fullscreen API , который предотвращает наложения применением z-index , относительного позиционирования (relative position) и overflow к родительскому элементу.

В большинстве случаев, вполне вероятно, мы будем использовать showModal() вместо метода show() .

Кастомизация стилей

Диалоговое окно по умолчанию использует стили браузера, однако их можно переопределись, как и для большинства элементов. Например вы можете сделать границу диалогового окна тоньше, скруглить уголки и добавить тень.

К тому же, когда элемент показывается методом showModal() , мы имеем в своем распоряжении дополнительный псевдоэлемент::backdrop . Этот псевдоэлемент располагается непосредственно под диалоговым окном, перекрывая всю область просмотра (viewport).

Он используется в качестве прозрачного темного фона – кликните по красной кнопке, чтобы увидеть в действии:

Добавляем элегантность с помощью transitions

Кастомизация стилей диалогового окна должна быть простой, но что по поводу добавления CSS transition? Что насчет плавного открытия окна, используя эффект масштабирования, примерно так же как это делает OS X?

Шаг 1

Для начала мы уменьшим масштаб диалогового окна на 90%, применим transition и скроем окно с глаз долой.

Dialog { visibility: hidden; transform: scale(0.1); transition: transform 200ms; }

Шаг 2

Теперь мы определяем класс, который будет масштабировать диалоговое окно до реального размера и делать его видимым.

Dialog.dialog-scale { visibility: visible; transform: scale(1); }

Шаг 3

Наш трюк состоит в том, чтобы "задержать" диалоговое окно малого масштаба на несколько миллисекунд прежде чем добавить класс dialog-scale . Чтобы добиться этого, мы добавляем класс, используя js-метод setTimeout() :

Var transition; $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); transition = setTimeout(function() { $accountDeleteDialog.addClass("dialog-scale"); }, 0.5); });

Шаг 4

Не забываем удалить этот класс и очистить timeout при закрытии диалогового окна.

$("#cancel").on("click", function() { $accountDeleteDialog.close(); $accountDeleteDialog.removeClass("dialog-scale"); clearTimeout(transition); });

На этом все! Результат можно посмотреть на следующем демо:

Подводя итог

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

http://caniuse.com/#feat=dialog

А до тех пор можно использовать polyfil от Google Chrome для симуляции подобного поведения в браузерах, которые этого еще не поддерживают.

Элемент (от англ. dialog - диалог) создаёт диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт.

Диалоговое окно отображается со следующим предустановленным стилем.

Position: absolute; left: 0; right: 0; margin: auto; border: solid; padding: 1em; background: white; color: black;

Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.

Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и close() , как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal() . В этом случае остальные элементы на странице блокируются - текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc .

Синтаксис

...

Закрывающий тег

Обязателен.

Пример

dialog body { background: url(/example/image/shark.jpg) no-repeat; background-size: cover; } dialog { background: rgba(255, 255, 255, 0.7); width: 300px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 5px; } Открыть окно

Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете».

Закрыть окно

var dialog = document.querySelector("dialog"); document.querySelector("#openDialog").onclick = function() { dialog.show(); // Показываем диалоговое окно } document.querySelector("#closeDialog").onclick = function() { dialog.close(); // Прячем диалоговое окно }

Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента , до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается.

Рис. 1. Вид диалогового окна

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

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

Ранее для создания диалоговых окон требовалось подключить jQuery плагин вроде Pop Easy, Twitter Bootstrap Modal или jQuery UI Dialog. Однако теперь значительно выросший в возможностях HTML 5 позволяет избежать их использования, используя для этого встроенный элемент под названием .

Ранее в далеком 2009 году данный элемент уже был в составе HTML 5, однако был из него исключен. Теперь он снова возвращается — уже в новой форме.

Поддержка элемента браузерами

К сожалению, на данный момент его поддержка крайне ограничена. Его возможно использовать лишь в Safari 6.0 и Chrome Canary. При этом в Chrome Canary требуется его предворительно активировать в настройках. Для этого перейдите по адресу chrome://flags и включите “Enable experimental Web Platform features” .

Взаимодействие с HTMLDialogElement Методы:

HTMLDialogElement имеет следующие методы, позволяющие работать с диалоговыми окнами.

• show() : Этот метод используется для открытия диалога. Отличие данного метода от следующего заключается в том, что у пользователей несмотря на открытое окошко диалога по прежнему есть возможность пользоваться страницей — они могут ее скролить, что-то копировать, переходить по ссылкам без перезагрузки страницы и т.п.
• showModal() : В данном случае у пользователя есть доступ лишь к открытому «модальному окну».
• close() : Данный метод закрывает диалог. Забегая немного вперед скажу, что в нем можно передать параметр returnValue.

Атрибуты:

HTMLDialogElement включает в себя следующие два атрибута.

• returnValue: Возвращает параметр, который был передан в close() — его указывать не обязательно, он опциональный.
• open: Является Boolean-типом данных. Что говорит о том, что он может принимать только два значения — true, в этом случае диалог будет показан пользователю, или false, тогда он скрыт.

События:

Функция, вызывающаяся при закрытие онка, выглядит следующим образом:

dialog.addEventListener("close", function() { Сюда уже можно писать код для выполнения в случае закрытия окна });

Помимо выше упомнянутых методов и атрибутов, также поддерживает:

• form : Используется для интеграции формы с . Работает благодаря данной привязки только внутри диалогового окна.
• атрибут autofocus: Нужен для фокуса на инпутах внутри диалога.
• cancel event: Данный event будет срабатывать после закрытия окна через клавишу “Esc”.

Теперь, изучив основы , можно посмотреть на практике пример его использования.

Синтаксис создания диалоговых окон

Спасибо Hevix"у за отличный урок;)

Закрыть Открыть окно

Код настолько понятен и прост, что думаю не требует пояснений. Что нужно понимать, это то, что содержание всплывающего окна заключается внутрь тега , а его вызов должен находится вне данного тега.

Для показа содержимого элемента требуется использование JavaScript, а именно вызов методов.show() и.close() . Они уже упоминались ранее.

(function() { var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() { dialog.show(); }; document.getElementById("closeDialog").onclick = function() { dialog.close(); }; })();

(function () { document . getElementById ("showDialog" ) . onclick = function () { dialog . show () ; document . getElementById ("closeDialog" ) . onclick = function () { dialog . close () ; } ) () ;

Все готово. Как видите мы использовали минимальное количество строк кода, несоизмеримое с тем, если бы мы подключали для этого сторонний плагин. Теперь при нажатие на кнопку «Открыть окно» вы увидите диалоговое окно, нажатие на кнопку «Закрыть» скроет его.

Стилизации диалоговых окон

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

dialog { top: 28%; width: 400px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 15px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px solid #eb9816; } button{ display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.4rem 0.8em; background: #eb9816; border-bottom: 1px solid #f1b75c; color: white; font-weight: bold; margin: 0 0.25rem; text-align: center; } button:hover, button:focus { opacity: 0.92; cursor: pointer; }

dialog { top : 28% ; width : 400px ; border : 1px solid rgba (0, 0, 0, 0.3 ) ; border-radius : 15px ; box-shadow : 0 3px 7px rgba (0, 0, 0, 0.3 ) ; border-top : 5px solid #eb9816 ; button { display : inline-block ; border-radius : 3px ; border : none ; font-size : 0.9rem ; padding : 0.4rem 0.8em ; background : #eb9816 ; border-bottom : 1px solid #f1b75c ; color : white ; font-weight : bold ; margin : 0 0.25rem ; text-align : center ; button:hover, button:focus { opacity : 0.92 ; cursor : pointer ;

Создание модальных диалоговых окон

Если требуется полностью сфокусировать внимание пользователя на всплывающем окне, есть смысл использовать модальные диалоговые окна. Их вызов не сильно отличается от обычных. Требуется изменить лишь в JS файле.show() на the .showModal() . В HTML не нужно ничего менять.

(function() { var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() { dialog. showModal(); }; document.getElementById("closeDialog").onclick = function() { dialog.close(); }; })();

(function () { var dialog = document . getElementById ("Dialog" ) ;

Новые элементы HTML5 и новые API-интерфейсы JavaScript позволяют нам создавать сложные приложения для браузеров. Частью любого современного приложения являются различные диалоговые окна. Они предлагают пользователям подтвердить выполнение каких-либо действий или просто выдают сообщения. С новым элементом "" теперь мы можем создавать эти окна при помощи чистого HTML5.

Простая разметка без стилей

Элемент может быть размещен в любом месте внутри тега body на HTML-странице. Не рекомендуется размещать его в текстовых параграфах -

, так как это может привести к проблемам с отображением. Это, скорее всего, произойдет с элементами , которые содержат дополнительные элементы и не только текстовые. Определение свойства "open " покажет диалоговое окно при открытии страницы. Без этого свойства окно будет в первоначальном виде закрыто.

Пожалуйста, прочтите наши Условия предоставления услуг .

Условия предоставления услуг …

…

В нашем примере мы определили диалоговое окно между двумя параграфами. Такое положение элемента гарантирует, что он будет показан горизонтально по центру, не принимая во внимание поток других элементов. Вертикально оно вычисляет свою позицию относительно верхней границы окна браузера. Если вас это устраивает, то использование CSS не требуется.

Если стандартное представление не для вас, добавьте свои собственные стили и настройте его по своему вкусу. Вы можете использовать любые свойства CSS, как для настройки блочных элементов - наиболее используемые "border-radius" и "shadow" для дополнительных эффектов.

Управление Dialog с помощью JavaScript

Чтобы открыть и закрыть элемент используйте методы JavaScript show() и close() .

document.getElementsByTagName ("span" ) [ 0 ] .addEventListener ("click" , function () {
document.getElementsByTagName ("dialog" ) [ 0 ] .show () ;
} , false ) ;

Document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("click" , function () {
this .close () ;
} , false ) ;

В нашем примере мы определяем два события. Первое событие приводит к открытию диалогового элемента при нажатии на первый элемент . При нажатии на открытое диалоговое окно оно будет закрыто.

Формы внутри элемента Dialog

Элемент способен содержать не только простой текст, но также дополнительные элементы. Это позволяет нам, например, разместить форму внутри диалогового окна. Имейте ввиду, что вместо обычных методов "post" и "get" вам нужно будет использовать специальный метод "dialog" для обработки содержимого формы.

Наши Условия предоставления услуг …

Принять
Отказаться

В этом примере мы создали форму с двумя кнопками внутри диалога. Нажатие любой из кнопок приводит к закрытию диалогового элемента. JavaScript здесь не требуется. Но если вы хотите предотвратить закрытие окна по клику, Вам все еще необходимо использовать JavaScript. Достаточно добавить событие "click " для кнопки, которое будет предотвращать действие кнопки по умолчанию с помощью "preventDefault()" .

Реакция на закрытие диалогового окна

Событие "close" позволяет нам реагировать на закрытие диалогового окна.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("close" , function (e) {
var answer = this .returnValue ;
} , false ) ;

Свойство "returnValue" возвращает "value" - значение кнопки, которая была использована, чтобы закрыть окно. Если в нашем примере была нажата кнопка "Отказаться" "ReturnValue" вернет значение "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.

Создание модального диалогового окна

Если вы хотите быть уверенным, что никакое другое содержимое вашей HTML-страницы не может быть доступно пока диалоговое окно открыто, то вы можете использовать модальные диалоговые окна. Они будут открыты только при помощи JavaScript и его метода "showModal() ". Модальные диалоги делают неактивным все другое содержимое. Вы не можете нажать, изменить, или выбрать неактивное содержимое.

document.getElementsByTagName ("dialog" ) [ 0 ] .showModal () ;

В отличие от стандартных диалоговых окон, модальный вариант будет отцентрирован не только по горизонтали, но и по вертикали.

Если вы хотите использовать другой цвет вы можете использовать псевдо-элемент "::backdrop ". Убедитесь, чтобы вы выбрали цвет с низким значением "RGBA() ", чтобы избежать полного сокрытия содержания.

dialog: :backdrop {
background : rgba(255 , 0 , 255 , 0.25 ) ;
}

В нашем примере мы решили использовать светло-желтый цвет. Если вы хотите, вы можете выбрать фоновое изображение вместо цвета.

Модальные диалоги всегда можно закрыть нажав клавишу ESC. Это делает необходимым добавить еще одно событие в диалоге. Как только событие "close" сработало, когда окно закрывается с помощью кнопки формы, убедитесь, чтобы вы добавили событие "cancel" . Оно будет срабатывать, как только модальное окно закроется при помощи клавиши ESC.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("cancel" , function (e) {
var answer = "cancelled" ;
} , false ) ;

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

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

Поддержка браузерами

Поддержка элемента еще не достаточно распространена на момент написания этой статьи. Только Chrome и Safari интерпретируют элемент правильно. Все остальные браузеры рассматривают его как простой блочный элемент, что означает, что они всегда будут показывать его содержимое независимо от того установлено свойство "open" или нет. Текущее положение дел можно .

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим