Приднестровская поддержка XOOPS
Использование модальных окон вместо встроенных диалоговых окон.
Модальное окно — это окно, которое будет активным до тех пор, пока пользователь его не закроет. Такие окна могут применяться вместо метода prompt () для ввода данных.
Для их отображения выполняется такой код:
[<Переменная> = ] window.showModalDialog(<URL>, [<Аргументы>],[<Свойства окна>]);
Здесь используются следующие параметры:
□ <URL> определяет URL-адрес страницы, которая будет загружена в окно;
□ <Аргументы> позволяют передать в диалоговое окно произвольный набор параметров;
□ <Свойства окка> определяют внешний вид окна.
В параметре <Свойства окна> могут быть указаны следующие свойства:
□ dialogWidth И dialogHeight задают ширину И высоту окна В абсолютных (рх, mm) или относительных (em, ex) величинах;
□ diaiogTop и diaiogLeft задают вертикальную и горизонтальную координаты левого верхнего угла создаваемого окна;
□ 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} — включает или отключает отображение строки состояния;
□ diaiogArguments — переменная или массив переменных, передаваемых в модальное диалоговое окно;
□ returnvalue возвращает значение из модального окна.
Приведем пример использования модальных диалоговых окон. Создадим два файла: основной документ test.html (листинг 48) и документ doc1.html (листинг 49), загружаемый в модальное окно.
Листинг 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>
Листинг 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 мы передаем данные формы обратно в наш документ и можем с ними делать все, что захотим.
Отправитель | Нити |
---|
2 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |