Модальное окно сообщения

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Модальное окно сообщения - это перемещаемый HTML-блок, с заголовком и телом для HTML-содержимого, с фоновым слоем.
В заголовке может присутствовать или отсутствовать кнопка закрытия окна.

Модальное окно сообщения - часть оконной системы VcorpJS, отличается от остальных окон модальностью в пределах веб-страницы, имеет всегда дескриптор 1 и постоянный zIndex (самый высокий среди плагинов VcorpJS).
Автоматически поддерживаются устройства с сенсорным экраном - окно сообщения можно перемещать по экрану за заголовок.

При создании окна сообщения, создаётся полупрозрачный слой (div), у которого zIndex равен 298 (у самого окна 299), слой автоматически подстраивается под максимальные текущие размеры веб-страницы (при resize и scroll окна браузера). Все элементы веб-страницы, которые могут получить фокус (input, button, select, textarea, a , iframe), получают временное значение tabIndex = -1 (их текущие значения tabIndex запоминаются в создаваемых свойствах .pb_wOldTabIndex).

.wAlert( headHTML , bodyHTML , width , height , [ buttons ] , [ opacity ] )

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

headHTML - Текст или HTML-содержимое заголовка окна.

bodyHTML - HTML-содержимое окна.

width, height - ширина и высота окна в пикселях (числа number). Минимум 100 и 50 соответсвенно. Могут быть числами number или строками вида "100px".

buttons - 3 - без кнопки закрытия окна, остальные значения - с кнопкой закрытия.

opacity - число от 0 до 1 - прозрачность окна. Указывается кросс-браузерно (для IE8 тоже от 0 до 1). Прозрачность слоя под окном всегда 0.5 и анимируется.

Функция возвращает true при создании окна, false если окно сообщения уже существует.

.wDelete( 1 [, animate ] )

Функция уничтожает окно сообщения по его дескриптору 1.

animate - если параметр указан (не 0 или true и т.д.), то окно при исчезновении растворяется (используется встроенная анимация прозрачности). В этом случае не следует сразу создавать новое окно сообщения - нет смысла, пока не будет завершена анимация и удалено текущее окно. Если окно закрыл пользователь, анимация есть.

При удалении окна, все элементы веб-страницы, у которых менялся zIndex в момент создания окна сообщения ('input','button','select','textarea','a','iframe'), получают свои старые значения tabIndex.

Функция фозвращает true при успешном удалении окна, false при неверном дескрипторе и прочих ошибках.

Если окно закрывает пользователь, кликнув по кнопке закрытия окна, то для подтверждения вызывается callback-функция (если она задана), подробнее об этом в описании оконной системы (функция .wCallback( handler ) для установки своего обработчика операций с окнами - настройка окон и оконная callback-функция ).

.isAlert()

Проверка существания окна сообщения, возвращает true или false

.wSet( 1 , [ left ] , [ top ] , [ width ] , [ height ] , [ buttons ] , [ opacity ])

Установка размеров и положения окна сообщения, а так-же кнопки закрытия и прозрачности.

left, top, width, height - положение и размеры окна в пикселях (числа number).

buttons - 3 - без кнопки закрытия окна, остальные значения - с кнопкой закрытия.

.wGet( 1 )

Получение текущих параметров окна сообщения (указанный дескриптор 1).
Если окна нет, то возвращает undefined, иначе объект {...} со следующими полями :

Поле	Тип	Назначение
count	number	Количество существующих окон (кроме модальных), как скрытых, так и открытых.
desc	number	descriptor окна, совпадает с передаваемым параметром 1
descTop	number	descriptor окна на переднем плане (кроме модальных), 0 - если видимых окон нет, или 2-49
dialog	number	Признак модального диалогового окна, 1 - существует, 0 - нет
message	number	Признак модального окна сообщения, 1 - существует, 0 - нет
index	number	Для окна сообщения всегда 0, для обычных (немодальных) окон позиция: 0-свёрнуто, 1-на переднем плане, 2-следующее за передним, и т.д. до 48
left	number	Текущая координата X левого верхнего угла окна в пикселях
top	number	Текущая координата Y левого верхнего угла окна в пикселях
width	number	Текущая ширина окна в пикселях
height	number	Текущая высота окна в пикселях
buttons	number	1 - есть кнопка закрытия окна, 3 - нет и закрыть можно только программно
opacity	number	от 0 до 1 - текущая прозрачность окна (не слоя под ним!), для IE8 тоже от 0 до 1
caption	string	HTML - содержимое заголовка окна сообщения

.wHead( 1, stringHTML )

Меняет HTML-содержимое залоговка окна сообщения (caption). Возвращает true или false

.wBody( 1, stringHTML )

Меняет HTML-содержимое окна сообщения. Возвращает true или false

Все функции плагина использует CSS-классы окна сообщения, названия которых начинаются с .pb_alert (так же обязательны CSS-классы окон).
Если в CSS не указано .pb_alert { position: fixed; }, то принудительно устанавливается absolute,
независимо от стиля, модальное окно сообщения всегда позиционируется по центру экрана, потом уже пользователь может его перемещать при желании.

В некоторых случаях, рекомендуется вместо position: fixed; указывать position: absolute;
Например, на сенсорных экранах (если экран малых размеров), а так же в Opera presto (версия 12.17 и ниже - если глюки с отображением при скроллинге страницы).

VcorpJS.ready( function() {
var text = ( VcorpJS.isOPERA12() || VcorpJS.isTOUCH() ) ? ".pb_alert { position: absolute; }" : "";
/* дополнительно для FireFox (чтобы текст на кнопках не смещался вниз) */
if ( VcorpJS.isFF() ) text += "input::-moz-focus-inner { margin-top: -1px; }";
if ( text ) VcorpJS.addCss( text );
} );

Визуальный пример создания окна сообщения (см. код и результат - кнопку ниже):

<input type="button" value="Показать сообщение" onclick="myFunc()"/>
<script type="text/javascript">
function myFunc() {
var txtHead = "Моё сообщение",
txtBody='Моё окно сообщения<div class="px10"></div><input type="button" id="myButton" value="ok" onclick="VcorpJS.wDelete(1,1)"/>';
VcorpJS.wAlert( txtHead, txtBody, 300, 120 );
VcorpJS.id("myButton").focus();
};
</script>

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.