Новые элементы 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
)
;
Если Вы имеете больше чем один открытый диалог в одно и тоже время, используйте стили чтобы убедиться, что они не перекрываются. Исключение для модальных окон, они всегда будут блокировать другое содержимое и, таким образом, не позволят использование более чем одного модального окна одновременно.
Поддержка браузерамиПоддержка элемента еще не достаточно распространена на момент написания этой статьи. Только 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() { 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" ) ; |
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTMLПервый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно X Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
СтилиСоздаем класс modalDialog и начинаем формировать внешний вид:
ModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index .
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events , но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog , так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target” .
Теперь добавляем псевдо класс :target и стили для модального окна.
ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.
Разработка HTML-формы для диалогового окна
В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.
Рис. 7.3. Диалоговое окно для работы с записной книжкой
Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.
В самом начале файла Phone.htm ставится тег , указывающий на то, что содержимым файла является текст в формате HTML, а также теги и , внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги и ):
Форма для записной книжки
Для того чтобы задать цвет формы, в теге используется атрибут bgcolor со значением " silver ":
Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.
Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).
Таблица 7.2. Поля ввода диалогового окна для работы с записной книжкой
| txtLastName | 50 | Поле для ввода фамилии |
| txtName | 50 | Поле для ввода имени |
| txtPhone | 15 | Поле для ввода номера телефона |
| txtStreet | 50 | Поле для ввода названия улицы |
| txtHouse | 10 | Поле для ввода номера дома |
| txtApp | 5 | Поле для ввода номера квартиры |
| txtNote | 80 | Поле для ввода примечания |
Таблица 7.3. Кнопки диалогового окна для работы с записной книжкой
| btnNext | Переход к следующей записи | |
| >> | btnFinal | Переход к последней записи |
Команды, создающие форму, находятся внутри тегов и . Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега . Внутри этого тега нужно указать несколько атрибутов:
Type - определяет тип элемента управления (для поля ввода type="text" , для кнопки type="button");
Name - задает имя элемента управления;
Size - определяет длину строки поля ввода в символах;
Value - задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором - сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов
| и | , определяющие одну ячейку таблицы, например:Фамилия | указывается аргумент width , задающий ширину строки в процентах от общей ширины строки. Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность ), например: Листинг 7.6. Описание формы в HTML-файле (Phone.htm) Форма для записной книжки
|
