Пример создание диалогового окна в html. HTML-приложения: использование диалоговых окон (ч.1). Стилизации диалоговых окон

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

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

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

Это при проверке, что все отлично работает:

Приступаем к установке:

Окно с кнопкой

ZorNet.Ru - портал вебмастера×
Здесь будет находится контент по тематике для сайта.

CSS

Butksaton-satokavate {
display: inline-block;
text-decoration: none;
margin-right: 7px;
border-radius: 5px;
padding: 7px 9px;
background: #199a36;
color: #fbf7f7 !important;
}

Anelumen {
display: flex;
position: fixed;
left: 0;
top: -100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
}

Anelumen:target {
top: 0;
opacity: 1;
-webkit-transition: none;
transition: none;
}

Anelumen figure {
width: 100%;
max-width: 530px;
position: relative;
padding: 1.8em;
opacity: 0;
background-color: white;
-webkit-transition: opacity .7s;
transition: opacity .7s;
}

Anelumen.lowingnuska figure {
background: #f9f5f5;
border-radius: 7px;
padding-top: 8px;
border: 3px solid #aaabad;
}

Anelumen.lowingnuska figure h2 {
margin-top: 0;
padding-bottom: 3px;
border-bottom: 1px solid #dcd7d7;
}

Anelumen:target figure {
opacity: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise {
text-decoration: none;
position: absolute;
right: 8px;
top: 0px;
font-size: 41px;
}

Anelumen .nedismiseg {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(10, 10, 10, 0.87);
content: "";
cursor: default;
visibility: hidden;
-webkit-transition: all .7s;
transition: all .7s;
}

Anelumen:target .nedismiseg {
visibility: visible;
}

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

Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.

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

Диалоговые окна бывают двух видов:

Модальные (modal) диалоговые окна блокируют все остальные окна приложения, то есть пользователь не сможет получить доступ к любому другому окну, пока не закроет диалоговое окно нажатием кнопки ОК или Отмена . Обычно модальные диалоговые окна используются для ввода каких-либо данных, критически важных для продолжения работы приложения. Например, диалоговое окно открытия файла всегда делается модальным.
Немодальные (modeless) диалоговые окна не блокируют остальные окна приложения. Пользователь может свободно переключаться между таким диалоговым окном и любым другим окном приложения. Немодальные диалоговые окна применяются значительно реже модальных. Они используются для указания рабочих параметров, некритичных для продолжения работы программы, и выполнения различных действий с основным окном или загруженным в нём документом. Так, диалоговое окно поиска всегда делается немодальным.

Internet Explorer позволяет нам использовать в HTML-приложениях как модальные, так и немодальные диалоговое окна. Сейчас мы рассмотрим, как это делается.

Примечание:
Перед чтением этой статьи настоятельно рекомендуется ознакомиться с предыдущими тремя статьями цикла, посвящённого HTML-приложениям Internet Explorer.

1. Готовим тестовое HTML-приложение
Давайте создадим простейшее HTML-приложение текстового редактора без всяких "наворотов". Оно будет содержать большую область редактирования, где, собственно, и вводится текст, и кнопку Параметры , при нажатии которой будет выводиться диалоговое окно ввода параметров.

Набор параметров, которые пользователь может указать, у нас будет небольшим. Это, прежде всего, функция переноса текста в области редактирования - будет ли она включена или отключена. И цвет текста; пусть пользователь получит возможность выбирать между чёрным, синим, зелёным и красным цветом.

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

HTML-код приложения приведён ниже.

Текстовый редактор

window.resizeTo(710, 490);

Сохраним это приложение в двух файлах: Textedit_modal.hta (версия с модальным диалоговым окном) и Textedit_modeless.hta (версия с немодальным диалоговым окном). И приступим...

2. Как реализуются диалоговые окна
Но сначала - небольшой теоретический курс. Прежде всего, содержимое любого диалогового окна - и модального, и немодального - реализуется в виде обычной веб-страницы. Эта веб-страница сохраняется в отдельном файле с расширением htm или html (как и содержимое отдельных "окон" приложения, о создании которых рассказывалось во второй статье цикла).

При открытии модального диалогового окна мы можем передать ему некоторые данные (об этом - далее). Это могут быть, скажем, текущие значения параметров приложения, которые потом будут подставлены в элементы управления диалогового окна.

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

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

Вот пока и всё. Займёмся практикой. А остальные теоретические вопросы рассмотрим по ходу дела.

3. Реализация модальных диалоговых окон
Начнём с реализации модальных диалоговых окон как наиболее часто используемых.

3.1. Открытие модального диалогового окна
Мы только что узнали, что содержимое диалогового окна реализуется в виде обычной веб-страницы. Создать веб-страницу для нас труда не составит. Но как открыть само диалоговое окно?

Для открытия модального диалогового окна применяется метод showModalDialog объекта Window. Формат вызова этого метода таков:

.showModalDialog(
[,
[,
]]
);
Первый параметр этого метода является обязательным. Он задаёт интернет-адрес веб-страницы, реализующей содержимое диалогового окна, в виде строки.

Window.showModalDialog("options_modal.html");
Второй параметр необязателен. Он задаёт значение, которое будет передано диалоговому окну. (Как получить это значение в диалоговом окне, мы рассмотрим потом.) Передаваемое значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта.

Здесь мы передали диалоговому окну число 2.

Третий, также необязательный, параметр указывает параметры самого диалогового окна. Он должен представлять собой строку, содержащую наименования параметров и их значения. Наименование параметра отделяется от значения двоеточием, а отдельные параметры друг от друга - точкой с запятой (как и в случае написания стилей CSS).

"dialogHeight:300px;dialogWidth:400px");
Здесь мы указали параметры открываемого диалогового окна - высоту (300 пикселов) и ширину (400 пикселов).

Список параметров диалоговых окон, поддерживаемых Internet Explorer, довольно велик. Давайте их рассмотрим.

dialogLeft - задаёт горизонтальную координату верхнего левого угла диалогового окна относительно верхнего левого угла экрана. Если данный параметр не указан, горизонтальная координата окна будет выбрана произвольно.
dialogTop - задаёт вертикальную координату верхнего левого угла диалогового окна относительно верхнего левого угла экрана. Если данный параметр не указан, вертикальная координата окна будет выбрана произвольно.
dialogHeight - задаёт высоту диалогового окна. Если данный параметр не указан, диалоговое окно будет иметь высоту по умолчанию. Минимальное возможное значение высоты - 100 пикселов.
dialogWidth - задаёт ширину диалогового окна в пикселах. Если данный параметр не указан, диалоговое окно будет иметь ширину по умолчанию. Минимальное возможное значение ширины - 250 пикселов. Для указания координат верхнего левого угла и размеров диалогового окна может быть использована любая единица измерения, поддерживаемая CSS, с обязательным указанием её обозначения. Так, в приведённом выше примере символы px, поставленные после значений высоты и ширины, указывают, что они заданы в пикселах.
dialogHide - указывает, следует ли скрывать диалоговое окно при выполнении печати или предварительного просмотра перед печатью. Значение yes, 1 или on указывает сделать это, а значение no, 0 или off - не делать. Значение по умолчанию - no.
center - задаёт, должно ли диалоговое окно находиться в центре экрана. Значение yes, 1 или on указывает Internet Explorer расположить диалоговое окно по центру экрана, а значение no, 0 или off - не делать этого. Значение по умолчанию - yes.
Примечание:
Если указать координаты диалогового окна с помощью параметров dialogHeight и dialogWidth, то диалоговое окно будет располагаться в указанном месте экрана независимо от значения параметра center. Или, другими словами, параметры dialogHeight и dialogWidth имеют больший приоритет.
edge - задаёт вид рамки, которая будет выведена вокруг содержимого диалогового окна, внутри его клиентской области (клиентская область - это внутренняя область окна, где собственно выводится содержимое веб-страницы). Значение raised указывает вывести "приподнятую" рамку (на деле такая рамка почти незаметна), а значение sunken - "утопленную" (а эта рамка заметна довольно хорошо и, надо сказать, сильно портит вид). Значение по умолчанию - raised.
resizable - указывает, будет ли пользователь иметь возможность менять размеры диалогового окна. Значение yes, 1 или on даёт ему такую возможность, а значение no, 0 или off - не даёт. Значение по умолчанию - no. Практически все диалоговые окна, прменяемые в профессионально написанных приложениях, имеют постоянные и неизменяемые размеры. Делать диалоговое окно с изменяемыми размерами нет никакого смысла, вдобавок, такое окно будет выглядеть странно.
scroll - указывает, будут ли в диалоговом окне присутствовать полосы прокрутки. Значение yes, 1 или on предписывает Internet Explorer вывести их, а значение no, 0 или off - не выводить. Значение по умолчанию - yes. Странно, что разработчики Internet Explorer решили по умолчанию наделить диалоговые окна полосами прокрутки. На памяти автора, ни одно Windows-приложение, попадавшееся ему в руки, не имело диалоговых окон с полосами прокрутки (если, конечно, не считать ученических поделок, в которых встречалось и не такое...). Вообще, диалоговое окно с прокруткой выглядит крайне нелепо. Так что вывод однозначен - полосы прокрутки убираем!
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:no");
status - задаёт наличие или отсутствие в диалоговом окне строки статуса. Значение yes, 1 или on выводит в окне строку статуса, а значение no, 0 или off - не выводит. Значение по умолчанию - no. Строка статуса в диалоговом окне - аксессуар явно лишний. Ни одно приложение, с которыми имел дело автор, таких штук не практиковало. Мы тоже не будем.
unadorned - указывает, должно ли диалоговое окно иметь рамку, заголовок, системное меню и кнопки максимизации, минимизации и закрытия, или, как сейчас говорят, хром . Значение yes, 1 или on задаёт отсутствие хрома, а значение no, 0 или off - его наличие. Значение по умолчанию - no. Вообще, убирать хром стоит только у мудрёных диалоговых окон в таких же мудрёных приложениях. Окно без хрома выглядит крайне непривычно и может обескуражить пользователя.

После вызова метода showModalDialog выполнение веб-сценария останавливается, пока диалоговое окно не будет закрыто. Выполнение будет продолжено только после закрытия окна.

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

Примечание:
Вызов метода showModalDialog может присутствовать только в обработчиках событий, возникающих вследствии действий пользователя (например, события click - щелчок мышью). В противном случае вызов этого метода будет проигнорирован.

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

Мы уже знаем, что можем передать модальному диалоговому окну значение любого типа, подставив его вторым параметром в вызов метода showModalDialog.

Window.showModalDialog("options_modal.html", 2);
Но что делать, если нам требуется передать в диалоговое окно несколько значений? Существует два способа сделать это.

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

Var aParams = true;
var aParams = "black";

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

Мы можем создать и ассоциативный массив (хэш):

Var aParams["wrap"] = true;
var aParams["color"] = "black";
window.showModalDialog("options_modal.html", aParams);
Пожалуй, так удобнее - строковые индексы хэша запомнить проще, чем числовые индексы обычного массива.

Способ второй - создать экземпляр объекта Object, воспользовавшись инициализатором JavaScript, создать в нём свойства, которым и присвоить передаваемые значения.

Var oParams = { wrap: true, color: "black" };
window.showModalDialog("options_modal.html", oParams);
Какой способ выбрать - дело вкуса. Например, автор предпочитает экземпляры объекта Object, читая их самыми подходящими для этой цели. А кому-то может показаться более удобными массивы - обычные или хэши.

3.3. Получение в модальном диалоговом окне данных, переданных окном, которое его открыло
Так, данные модальному окну мы передали. Теперь их нам нужно как-то их получить в самом этом окне.

Объект Window поддерживает доступное только для чтения свойство dialogArguments. Оно хранит значение, которое было передано диалоговому окну вторым параметром метода showModalDialog. То, что нам нужно.

Примечание:
Свойство dialogArguments доступно только в диалоговых окнах.

Вот так мы можем получить значения, переданные как элементы хэша:

Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["color"];
А так - значения, переданные как свойства экземпляра объекта Object:

Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Передача данных из модального диалогового окна в окно, которое его открыло
Осталось выяснить, как выполнить передачу данных в обратном направлении - из модального диалогового окна в окно, которое его открыло. Нам ведь придётся возвращать из диалогового окна параметров новые их значения, заданные пользователем, не так ли?

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

Итак, пользователь нажал в диалоговом окне кнопку ОК . Теперь нам нужно передать какие-то данные окну, из которого было открыто диалоговое окно. Как это сделать?

Объект Window поддерживает свойство returnValue. В этом свойстве сохраняется значение, которое должно быть передано из модального диалогового окна в окно, что его открыло. Значение это может быть любого типа.

Примечание:
Свойство returnValue доступно только в модальных диалоговых окнах.

Например, так мы можем передать из открывшему окну одно-единственное значение:

Window.returnValue = 2;
А так - несколько значений:

Window.returnValue = { wrap: bWrap, color: sColor };
Разумеется, в этом случае мы также можем использовать обычный массив или хэш.

Если же пользователь нажал в диалоговом окне кнопку Отмена , мы, как условились ранее, не будем присваивать свойству returnValue никакого значения. В таком случае данное свойство получит своё значение по умолчанию - null. Кстати, то же самое случится, если пользователь закроет диалоговое окно нажатием кнопки закрытия или комбинации клавиш +.

Хорошо! Диалоговое окно закрыто (как его закрыть, мы узнаем потом). Теперь окно, которое его открыло, должно получить значение свойства returnValue. Как?

Очень просто. Значение свойства returnValue будет возвращено методом showModalDialog в качестве результата. Впрочем, это уже говорилось в параграфе 2.1.

Мы должны проверить, равно ли это значение null. Если это так, значит, никаких данных диалоговое окно не передало. В противном случае мы сможем как-то использовать переданные им данные в приложении.

Var oResult = window.showModalDialog(. . .);
if (oResult != null) {
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Закрытие модального диалогового окна
Напоследок нам следует собственно закрыть модальное диалоговое окно. Для этого мы можем использовать не принимающий параметров и не возвращающий результата метод close объекта Window.

Window.close();
3.6. HTML-приложение с поддержкой модальных диалоговых окон
Что ж, настала пора чистой практики. Доделаем наше HTML-приложение текстового редактора, чтобы оно поддерживало задание параметров с помощью модального диалогового окна.

Код самого HTML-приложения (файл Textedit_modal.hta) после исправлений станет таким:

Текстовый редактор

window.resizeTo(710, 490);

Var bWrap = true;
var sColor = "black";

Function showParameters()
{
var oParams = { wrap: bWrap, color: sColor };
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oResult != null) {
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap ? "soft" : "off";
oTxtText.style.color = sColor;
}
}

Здесь, в принципе, нас всё уже знакомо. Требуются только минимальные пояснения.

Прежде всего, мы объявили две переменные - bWrap и sColor, - которые будут хранить текущие значения параметров приложения. Первая переменная будет хранить логическую величину - признак того, выполняется ли в области редактирования в данный момент перенос строк. А вторая переменная будет хранить текущее значение цвета текста в области редактирования в виде строки.

Примечание:
Вообще, текущие значения параметров можно вообще нигде не хранить, а каждый раз получать из соответствующих свойств экземпляра объекта HTMLTextAreaElement, представляющего область редактирования, где вводится текст. Просто автор решил не переусложнять код приложения.

Область редактирования представляется экземпляром объекта HTMLTextAreaElement. Этот объект поддерживает свойство wrap, задающее режим переноса строк. Значение "soft" этого свойства указывает области редактирования выполнять перенос строк, причём в местах переноса не будут вставляться символы возврата каретки и перевода строки ("мягкий" перенос строк). А значение "off" указывает области редактирования вообще не выполнять перенос строк.

Все объекты, представляющие элементы веб-страницы, поддерживают свойство style. Это свойство хранит экземпляр объекта CSSStyle, представляющий текущий стиль CSS, который привязан к данному элементу веб-страницы.

Объект CSSStyle, в свою очередь, поддерживает множество свойств, соответствующих различным атрибутам стиля. Так, свойство color соответствует одноимённому атрибуту стиля, задающему цвет текста.

Теперь создадим веб-страницу, реализующую само диалоговое окно. Поместим на ней флажок Перенос текста , раскрывающийся список Цвет текста и, разумеется, обязательные для окон подобного плана кнопки ОК и Отмена .

Код этой веб-страницы приведён ниже.

Параметры

function setup()
{
var oParams = window.dialogArguments;

OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}

Function sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = { wrap: oChkWrap.checked, color: oSelColor.value };
window.close();
}

Перенос текста

Цвет текста

Чёрный
Красный
Зелёный
Синий

Здесь, опять же, всё нам уже знакомо. Пояснения требуются самые минимальные.

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

Атрибут VALUE тега , создающего отдельный пункт списка, задаёт значение этого пункта.

Сразу после окончания загрузки веб-страницы, реализующей диалоговое окно, возникнет событие load. В качестве обработчика этого события мы указали функцию setup. Эта функция получит значение, переданное диалоговому окну от окна, что его открыло, - экземпляр объекта Object со свойствами, хранящими текущие значения параметров приложения. После этого она занесёт эти значения в соответствующие им элементы управления.

Объект HTMLInputElement, представляющий элемент управления, в том числе и флажок, поддерживает свойство checked, доступное только для флажков. Это свойство указывает состояние флажка: установлен ли он (значение true) или сброшен (значение false).

Объект HTMLSelectElement, представляющий список, поддерживает свойство value. Оно содержит значение пункта списка, который выбран в данный момент, в виде строки. Присвоив этому свойству какое-либо значение, мы укажем списку изначально выбрать пункт с этим значением.

При щелчке на кнопке ОК выполнится обработчик её события click - функция sendParams. Она создаст экземпляр объекта Object с помощью инициализатора JavaScript, занесёт в его свойства значения, заданные пользователем в элементах управления диалогового окна, - они станут новыми значениями параметров приложения. Полученный экземпляр объекта она передаст окну, которое открыло это диалоговое окно, то есть самому приложению, после чего закроет диалоговое окно.

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

Сохраним эту веб-страницу в файле options_modal.html. И проверим готовое HTML-приложение в действии.

Элемент 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.

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

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

Новые элементы 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" или нет. Текущее положение дел можно .

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

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

Ранее для создания диалоговых окон требовалось подключить 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 () {

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" ) ;