Оглавление

17.4. Модальные диалоговые окна.

Использование модальных окон вместо встроенных диалоговых окон.

 

Модальное окно — это окно, которое будет активным до тех пор, пока пользователь его не закроет. Такие окна могут применяться вместо метода 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 мы передаем данные формы обратно в наш документ и можем с ними делать все, что захотим.

 

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити