Глаза страшат, а руки делают

ЧАСТЬ ВТОРАЯ


16. Объект Window (окончание)
другие виды всплывающих окон
(только в Internet Explorer)

  • модальные окна;
  • метод createPopup()

Темой сегодняшнего урока станут дополнительные возможности создания всплывающих окон, реализованные только в Microsoft Internet Explorer.

Модальные окна

Если Вы обратили внимание, при вызове диалоговых окон типа alert() или confirm() мы не можем вернуться в главное окно, пока не нажмём какую-нибудь кнопку в диалоге. Такие окна, временно «парализующие» работу главного окна, называют модальными.

С помощью метода showModalDialog() можно создавать модальные окна самого разнообразного содержания.

Метод showModalDialog() имеет те же аргументы, что и open() — адрес окна, имя и набор свойств. Но сами свойства несколько другие:

Свойство

Значение

Описание

border

thick, thin

Размер рамки вокруг окна (толстая/тонкая)

center

yes|no, 1|0

Выравнивание окна по центру главного

dialogHeight

Число + единицы измерения

Высота окна

dilalogLeft

Число + единицы измерения

Горизонтальная координата

dialogTop

Число + единицы измерения

Вертикальная координата

dialogWidth

Число + единицы измерения

Ширина окна

edge

sunken, raised

Тип рамки окна: sunken (выемка) или raised (выступ, по умолчанию).

font

Строка таблицы стилей

Стиль, определенный по умолчанию для окна (принимает параметры bold и italic, перечисляются в любом порядке без разделителей: font=italic bold;)

font-family

Строка таблицы стилей

Вид шрифта, определенный по умолчанию для окна

font-size

Строка таблицы стилей

Размер шрифта, определенный по умолчанию для окна

font-style

Строка таблицы стилей

Тип шрифта, (обычный/курсив), определенный по умолчанию для окна

font-weight

Строка таблицы стилей

Толщина шрифта, определенная по умолчанию для окна

help

yes|no, 1|0

Включение кнопки Help в верхнюю панель

maximize

yes|no, 1|0

Включение кнопки Maximize в верхнюю панель

minimize

yes|no, 1|0

Включение кнопки Minimize в верхнюю панель

resizable

yes|no, 1|0

Включить/отключить возможность менять размеры окна мышкой

status

yes|no, 1|0

Наличие или отсутствие строки состояния

scroll

yes|no, 1|0

Наличие или отсутствие полос прокрутки

Обратите внимание:

  • свойства внутри кавычек разделяются не запятой, а точкой с запятой: "dialogHeight=60mm; border=thin; help=no";
  • в обозначении числовых параметров указываются единицы измерения, те же, что и в стилях CSS — px (пиксели), mm (миллиметры), cm (сантиметры), pt (пункты);
  • булевы значения принимают параметры yes|no и 1|0, но не принимают true|false;

Есть и более принципиальные отличия. Если окна, вызванные методом open(), являются дочерними объектами главного окна, то модальные окна не имеют с ним «родственных отношений», поэтому их нельзя генерировать «на лету» из родительского окна, а необходимо явно указывать конкренный адрес. Например, чтобы представить наш всплывающий волшебный инвентарь в качестве модального окна, нужно создать отдельный файл с этой картинкой и этим текстом. Либо можно просто вызвать картинку без текста.

<!-- функция для модального окна -->
<script type="text/javascript">
function openMod(url, name, wd, ht) {
var
param = ht
param += "border=thin; "
param += "help=no; "
param += wd
param += "status=no; "
param += "scroll=no; "
param += "font=bold italic; "
param += "font-family=Arial; "
param += "edge=sunken; "
param += "center=no"

/* предупредим пользователей других браузеров: */
if (document.all)
{window.showModalDialog(url, name, param)}
else {
alert("В Вашем браузере это не работает"))
}

</script>

<!-- кнопки с вызовом функции -->
<div align="center">
<button onclick="openMod('lsn_js16.files/samobran.gif','win1','dialogWidth=560px; ','dialogHeight=476px; ');">Посмотреть картинку</button>&nbsp;&nbsp;&nbsp; <button onclick="openMod('lsn_js16.files/modaltest.html','win2','dialogWidth=500px; ','dialogHeight=60px; ');">Посмотреть документ html</button>
</div>

Примечание

Рамки окна и строка заголовка тоже входят в ширину и высоту окна. Поэтому, чтобы рисунок поместился, я увеличил ширину окна на 6 px, а высоту — на 34 px по сравнению с размерами файла samobran.gif.

Примечание 2

Для определения типа браузера я использовал конструкцию document.all (которая реализована только в IE). О том, что это означает, мы поговорим в уроках, посвящённых свойствам и методам документа.

Посмотреть результаты:

   

Вообще же не советую увлекаться этим методом: он работает тольо в IE, да и то не слишком стабильно.

Всплывающие окна: метод createPopup()

Методом createPopup() можно создать ещё один вид всплывающих окон. У этих окон нет никаких кнопок, заголовков и строки состояния. Они не отображаются внизу, на панели задач Windows. Они относятся к тому же типу окон, что и всплывающие подсказки, но могут содержать форматированный текст и графику.

<script type="text/javascript">
/* создание всплывающего окна */
var okno = window.createPopup()
/* переменная для содержимого окна */
var oknoBody = okno.document.body
/* Теперь можно указать некоторые параметры окна */
with (oknoBody.style)
{
border = "solid 1px #0000FF" // рамка окна
padding = "0px"              // отступ текста
color = "#0000FF"            // цвет текста
background = "#FFDFDF"       // цвет фона
}
/* заполняем окно: */
oknoBody.innerHTML = "<h2 align='center' style='color: #F00;'>ОАО &laquo;Сумка волшебника&raquo;</h2><img src='lsn_js16.files/samobran.gif' border='0'
valign='top' hspace='0' vspace='0'><p align='center'>Ковры-самолёты, скатерти-
самобранки, сапоги-скороходы.<br><i>Имеются все размеры, возможны
скидки.</i><br><b style='color: #F00;'>Качество гарантируем!</b></p>
"
</script>

Вызывается такое окно методом show() со следующими аргументами:

  • отступ слева;
  • отступ сверху;
  • ширина;
  • высота;
  • [относительная позиция].

Квадратными скобками я указываю, что последний аргумент необязателен. Сейчас разъясню, что он из себя представляет.

Первые четыре аргумента задаются в пикселях. Если последний аргумент не задан, то системой координат является весь экран монитора (то есть нулевыми координатами становится верхний левый угол экрана).

Последний аргумент позволяет задать другое координатное пространство, например, ограничиться окном документа. Для этого нужно задать в пятом аргументе соответствующую ссылку. Например, document.body. В этом случае нуль окажется в левом верхнем углу текущей web-страницы.

Предположим, мы задаём для нашего окна следующие параметры:

okno.show(200,100,556,580,document.body);

Если мы добавим эту строку в наш скрипт, а сам скрипт поместим куда-нибудь на страницу, то окно будет всплывать при открытии страницы. Если мы поместим эту строчку в событие onclick какого-нибудь элемента (кнопки, абзаца, ссылки), то оно будет открываться щелчком по этому элементу. Давайте засунем это в кнопку, предупредив, однако, пользователей других браузеров:

<button onclick="if (document.all){okno.show(200,100,556,580,document.body)}
else {alert('В Вашем браузере это не работает')}"
>Посмотрим, что
получилось</button>

По умолчанию такое окно убирается щелчком по любой части документа. Если мы хотим убрать его другим способом, можно воспользоваться методом hide(). Этот метод не имеет аргументов.

Вот примерчик.

  
<div align="center">
<button onclick="if (document.all){okno.show(5,5,556,580)} else {alert('В Вашем
браузере это не работает')};document.getElementById
('oknohide').disabled=false;"
>Открыть</button>&nbsp;&nbsp;<button id="oknohide"
disabled onclick="if (document.all){okno.hide()}else {alert('В Вашем браузере
это не работает')};this.disabled=true;"
>Закрыть</button>
</div>

Итак, мы узнали:

как создавать в IE

  • модальные окна методом showModalDialog();
  • всплывающие окна окна методом createPopup().

К следующему уроку >>


 013057