Модальное диалоговое окно
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
Модальное диалоговое окно - это перемещаемый HTML-блок, с заголовком и кнопкой закрытия, с телом для HTML-содержимого, с фоновым слоем.
Плагин никак не связан и не имеет ничего общего с оконной системой и функциями оконной системы.
Пример диалогового окна - это форма обратной связи на этой странице. Так же в диалоговом окне может содержаться таблица с данными (грид).
Плагин автоматически поддерживает устройства с сенсорным экраном - диалоговое окно можно перемещать по экрану за заголовок.
При создании диалогового окна, создаётся полупрозрачный слой (div), у которого zIndex равен 251, слой автоматически подстраивается под максимальные текущие размеры веб-страницы (при resize и scroll окна браузера). Все элементы веб-страницы, которые могут получить фокус (input, button, select, textarea, a , iframe), получают временное значение tabIndex = -1 (их текущие значения tabIndex запоминаются в создаваемых свойствах .pb_dOldTabIndex).
.createDialog( headHTML , bodyHTML , width , height , [ handler ] , [ background ] , [ opacity ] , [ selector ] )
Функция создаёт модальное диалоговое окно поверх содержимого страницы (по центру окна браузера).
Под диалоговым окном создаётся слой с указанными свойствами, который перекрывает всю страницу.
headHTML - Текст или HTML-содержимое заголовка окна.
bodyHTML - HTML-содержимое окна.
width, height - ширина и высота окна в пикселях (числа number).
handler - callback-функция, которая вызывается только при условии, что пользователь сам закрыл диалоговое окно, кликнув по кнопке закрытия окна.
Вызывается как myFunc( event ) - handler может быть текстовой строкой - см. правила для callback - функций
background - строка с цветом фона для слоя, например "#808080" (по-умолчанию) или "rgba(128,128,128,.5)".
opacity - число от 0 до 1 - прозрачность слоя. Указывается кросс-браузерно (для IE8 тоже от 0 до 1).
Если не указан цвет фона и не указана прозрачность, то цвет фона "#808080" и прозрачность 0.5.
Для IE8 проверяется фон на значение "rgba(...)" - в этом случае фон всегда "#808080" и прозрачность 0.5
selector - дополнительный текстовый селектор для уточнения коллекции объектов, которым нужно временно запретить получение фокуса.
Этот селектор подставляется перед input, a, textarea, button, select, iframe,
работает примерно так: document.querySelectorAll( selector + "button" )
Функция возвращает ссылку на созданный HTML-объект - диалоговое окно при успешном его создании, или false если диалоговое окно уже существует.
.removeDialog()
Функция удаляет модальное диалоговое окно и защитный слой поверх содержимого страницы. Функция ничего не возвращает.
При удалении окна, все элементы веб-страницы, у которых менялся zIndex в момент создания диалогового окна ('input','button','select','textarea','a','iframe'), получают свои старые значения tabIndex.
.isDialog()
Проверка существания модального диалогового окна, возвращает true или false
Все функции плагина использует CSS-классы, названия которых начинаются с .pb_dialog
Если в CSS не указано .pb_dialog { position: fixed; }, то принудительно устанавливается absolute,
независимо от стиля, диалоговое окно всегда позиционируется по центру экрана, потом уже пользователь может его перемещать при желании.
В некоторых случаях, рекомендуется вместо position: fixed; указывать position: absolute;
Например, на сенсорных экранах (если экран малых размеров), а так же в Opera presto (версия 12.17 и ниже - глюки с отображением при скроллинге страницы).
VcorpJS.ready( function() {
var text = ( VcorpJS.isOPERA12() || VcorpJS.isTOUCH() ) ? ".pb_dialog { 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.removeDialog()"/>';
VcorpJS.createDialog( txtHead, txtBody, 300, 120 );
VcorpJS.id("myButton").focus();
};
</script>
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.