Самое простое модальное окно на HTML и CSS. Синтаксис создания диалоговых окон
Очень часто для ввода каких-либо данных в 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-приложение в действии.
После огромного числа всплывающей рекламы на различных сайтах отношение к различным диалоговым окнам несколько негативное. Однако все безусловно зависит от цели, для которых они применяются. Порой их использование необходимо и значительно упрощает взаимодействие с пользователем.
Ранее для создания диалоговых окон требовалось подключить 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" ) ; |
Разработка 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) Форма для записной книжки
|