Создание новых окон


Динамический HTML предоставляет возможность создавать для различных целей новые окна. Созданные с помощью JavaScript, такие окна имеют стандартный вид и по типу разделяются на диалоговые и обычные. Диалоговые окна, называемые, также, модальными, приостанавливают действие всех скриптов и ожидают от пользователя нажатия на какую-либо кнопку или закрытия окна. Обычные работают независимо от текущего окна, откуда запускается программа.

Диалоговые окна

Существует четыре метода создания диалоговых окон, которые перечислены в таблице.

Метод Описание Вид Пример
alert Выводит текст и ожидает нажатия на кнопку ОК. Используется преимущественно для сообщений об ошибках. alert("Hello, world!")
confirm Аналогично alert, но выводит две кнопки ОК и Cancel. Используется для задания вопроса. При нажатии на ОК возвращается true, а кнопка Cancel возвращает false.

if( confirm("Удалить все? Уверены?"))

alert ("Удаляем...")

else alert ("Ну как хотите...");
prompt Запрашивает строку ввода. n = prompt ("Введите ваше имя:", defaultText="")
if (n) alert("Имя: " + n)
showModalDialog Загружает в окно указанный файл. Может возвращать значение. Поскольку этот тип окна отображает обычный HTML-документ, вид у него может быть любой. showModalDialog ("color.html")

Методы alert и confirm позволяют выводить несколько строк текста. Для переноса текста на другую строку используется символ . Метод prompt допускает не более двух строк в тексте запроса.

Создание индивидуальных диалоговых окон

С помощью метода showModalDialog можно создавать окна по своему виду и желанию. Однако, данный способ создания модальных окон поддерживается только браузером Internet Explorer.

Подобные окна имееют следующие особенности:

  • отсутствуют кнопки навигации;
  • не работает правая кнопка мыши;
  • содержимое нельзя выделить.

    Синтаксис вызова метода следующий.

    Возвращаемое значение = showModalDialog("URL", "имя окна", "параметры")

    URL представляет собой путь к HTML-документу, который следует открыть в диалоговом окне. Имя представляет собой условное название открываемого окна, его можно опустить.

    Параметры для управления видом окна могут быть следующими.

    Параметр Значение Описание
    border thick | thin Задает толщину рамки окна
    center yes | no или 1 | 0 Выравнивает окно по центру экрана монитора
    dialogHeight px, %... Высота диалогового окна
    dialogLeft px, %... Задает положение левого верхнего угла по горизонтали
    dialogTop px, %... Задает положение левого верхнего угла по вертикали
    dialogWidth px, %... Ширина диалогового окна
    maximize yes | no или 1 | 0 Добавляет кнопку "Развернуть" в строке заголовка
    minimize yes | no или 1 | 0 Добавляет кнопку "Свернуть" в строке заголовка

    Перечисленные параметры могут идти в любом порядке через запятую. Размер диалогового окна не может быть меньше, чем 100х100 пикселов и не допустимо размещать его за пределами экрана. Включение или выключение параметра можно определять через указание им значения yes или no (или 1 и 0). Например, center=yes идентично center=1.

    Пример 1. Создание диалогового окна
    <script language="JavaScript">

    showModalDialog("tips.html", "", "dialogWidth=350px, dialogHeight=200px")

    </script>

    В примере создается окно с размерами 350х200, в которое загружается файл tips.html .

    Создание всплывающих окон

    Всплывающие окна представляют собой обычные окна браузера, которые создаются с помощью объекта window. При этом можно управлять видом этого окна, задавая его размеры и отключая различные элементы.

    Для создания окна используется метод open, который имеет следующий синтаксис.

    window.open("URL", "имя окна", "параметры")

    Значения параметров совпадают с параметрами создания модального окна методом showModalDialog.

    Параметры, управляющие видом окна имеют некоторые отличия от элементов диалоговых окон.

    Параметр Значение Описание
    directories yes | no или 1 | 0 Отображает панель ссылок
    location yes | no или 1 | 0 Отображает адресную строку
    menubar yes | no или 1 | 0 Отображает меню
    scrollbars yes | no или 1 | 0 Показывает полосу прокрутки
    toolbar yes | no или 1 | 0 Показывает кнопки на панели инструментов
    status yes | no или 1 | 0 Отображает строку состояния
    rersizible yes | no или 1 | 0 Определяет, можно ли изменять размеры окна
    left пикселы Задает положение левого верхнего угла по горизонтали
    top пикселы Задает положение левого верхнего угла по вертикали
    width пикселы Ширина окна
    height пикселы Высота окна

    Ниже показан пример создания окна без полосы прокрутки, меню, строки навигации и др.

    Пример 2. Создание нового окна
    <script language="JavaScript">

    window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")

    </script>

    Параметры управления видом окна можно использовать в любом порядке, перечисляя их через запятую.

    Закрытие окна

    Если окно создано динамически с помощью скрипта, его можно закрыть в любой момент методом close.

    Пример 3. Закрытие окна
    <script language="JavaScript">
    help = window.open("help.html", "help", "width=350, height=200, status=0, menubar=0, location=0 resizable=0 directories=0 toolbar=0")
    </script>

    <a href="javascript:help.close()">Закрыть окно</a>

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

    Когда метод close применяется к основному окну, браузер выдаст предупреждение о том, что программа пытается закрыть окно и согласны вы на такое или нет. Это сделано в целях безопасности и исключает возможность непроизвольного закрытия нужных окон.



    Предыдущая статья     Следующая статья     Список статей