Модальные диалоговые окна. Использование модальных окон вместо встроенных диалоговых окон
Модальное окно — это окно, которое будет активным до тех пор, пока поль- зователь его не закроет. Такие окна могут применяться вместо метода prompt() для ввода данных.
Для их отображения выполняется такой код:
[<Переменная> = ]window.showModalDialog(<URL>, [<Аргументы>], [<Свойства окна>]);
Здесь используются следующие параметры:
? <URL> определяет URL-адрес страницы, которая будет загружена в окно;
? <Аргументы> позволяют передать в диалоговое окно произвольный набор па-
раметров;
? <Свойства окна> определяют внешний вид окна.
В параметре <Свойства окна> могут быть указаны следующие свойства:
? dialogWidth и dialogHeight задают ширину и высоту окна в абсолютных
(px, mm) или относительных (em, ex) величинах;
? dialogTop и dialogLeft задают вертикальную и горизонтальную коорди-
наты левого верхнего угла создаваемого окна;
? center — {yes | no | 1 | 0} — устанавливает выравнивание окна по центру экрана;
? edge — {sunken | raised} — задает вид границы окна: вдавленный
(sunken) или выпуклый (raised);
? resizable — {yes | no | 1 | 0} — включает или отключает возмож-
ность изменения размера создаваемого окна;
? scroll — {yes | no | 1 | 0} — устанавливает режим отображения по-
лос прокрутки;
? status — {yes | no | 1 | 0} — включает или отключает отображение строки состояния;
? dialogArguments — переменная или массив переменных, передаваемых в модальное диалоговое окно;
? returnValue возвращает значение из модального окна.
Приведем пример использования модальных диалоговых окон. Создадим два файла: основной документ test.html (листинг 3.48) и документ doc1.html (лис- тинг 3.49), загружаемый в модальное окно.
Листинг 3.48. Содержимое файла test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!- Корректно работает в Internet Explorer и Firefox/3.5.1
В Opera 9.02 не работает ->
<html>
<head>
<title>Модальные диалоговые окна</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript">
<!-
function f_open() { // Открываем окно
var obj = window.showModalDialog("doc1.html", ["Имя", "Фамилия"], "dialogWidth:300px; dialogHeight:150px; center=yes; status=no");
if (obj != null) {
var msg = "Имя: " + obj.pole1;
msg += "<br>Фамилия: " + obj.pole2;
document.getElementById("div1").innerHTML = msg;
}
}
//->
</script>
</head>
<body>
<p><input type="button" value="Открыть окно" onclick="f_open();"></p>
<div id="div1"></div>
</body>
</html>
Листинг 3.49. Содержимое файла doc1.html (модальное окно)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Введите имя и фамилию</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript">
<!-
function f_click() { // Возвращаем значения
var obj1 = {};
obj1.pole1 = document.forms[0].pole1.value; obj1.pole2 = document.forms[0].pole2.value; window.returnValue = obj1;
window.close();
}
function f_load() { // Задаем значения document.forms[0].pole1.value = window.dialogArguments[0]; document.forms[0].pole2.value = window.dialogArguments[1];
}
//->
</script>
</head>
<body onload="f_load();">
<form action="" id="frm">
<div style="text-align: center"> Имя:<br><input type="text" name="pole1"><br> Фамилия:<br><input type="text" name="pole2"><br>
<input type="reset" value="Очистить">
<input type="button" value="OK" onclick="f_click();">
</div>
</form>
</body>
</html>
Идеальным решением для получения значений полей из модального диалого- вого окна является применение объектов. С помощью свойства returnValue мы передаем данные формы обратно в наш документ и можем с ними делать все, что захотим.
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)
- Изменение вида курсора (0)
- Удаление пустого пространства между ячейками, появляющегося после добавления рамок (0)
- Что такое режим совместимости и как его избежать (0)