Всплывающие окна

[Diphenyl Oxalate]

Хз зачем я это сделал

Демо-страница (http://sweetest.do.am/dialog.html)
dialog.js (http://sweetest.do.am/dialog.js)

Вызывается функцией Dialog(), которая создаёт новое окно и принимает эти параметры:

Dialog( {
width : 400,
height : 200,
header : "Заголовок окна",
body : "Содержимое окна",
animated : false, // анимация при сворачивании, показе и скрытии
duration : 1000, // время для всех анимаций
modal : false, // блокировать ли содержимое страницы
noToggle : false, // не отображать кнопку "Свернуть"
noClose : false, // не отображать кнопку "Закрыть"
onlyThisWindow: false, // запретить показ других окон
onToggle : function (isOpen) {},
onClose : function () {}
} );

Dialog() возвращает объект, помогающий в дальнейшем работать с окном:

var bx = Dialog( ... );

bx.Box; // ссылка на DIV, содержащий все элементы окна (кроме Modal)
bx.Header; // ссылка на заголовок окна
bx.Body; // ссылка на тело окна
bx.ButtonClose; // кнопка "Закрыть"
bx.ButtonToggle; // кнопка "Свернуть/Развернуть"
bx.Modal; // DIV, реализующий модальность окна
bx.UserData; // объект data, переданный в Dialog( data )
bx.triggerClose(); // закрыть окно принудительно
bx.triggerToggle(); // свернуть или развернуть
bx.id; // уникальный ID окна
bx.onToggle(isOpen); // добавить обработчик на сворачивание/разворачивание окна
bx.onClose(); // добавить обработчик на закрытие окна

Примечательно, что в обработчик onToggle первым аргументом передаётся true, если окно на данный момент открыто и false, если свёрнуто.

Также есть глобальные свойства:


Dialog.onlyOneWindow = false; // запретить показ больше одного окна
Dialog.windows = []; // массив, содержащий данные о всех открытых окнах

[рони]

Diphenyl Oxalate,
для общего развития http://www.vanillalist.com/?Search=Modal

[Diphenyl Oxalate]

Тестовая страничка: все возможности Dialog Box (http://sweetest.do.am/dialog/dialogbox.html)

[Diphenyl Oxalate]

В новой версии ожидается:

- функция Dialog.custom() для создания пользовательских конструкторов окон:


var _custom = Dialog.custom({
width: 200,
height: 400,
animated: true,
duration: 300,
modal: true,
closeAll: true
});

_custom({ // создаёт окно с указанными параметрами + те, которые
// были прописаны в Dialog.custom
header: "Заголовок",
body: "Текст сообщения"
});


- новые параметры при создании Dialog():


{
closeAll: false, // при открытии закрывать все остальные окна
closeIfAny: false, // закрывать при открытии любого другого окна
holdIfAny: false, // не открывать, если открыто хоть одно окно
noCopy: false, // не открывать окно, если есть открытое окно,
// созданное из этого же обработчика
resizable: true, // разрешить изменение размеров. Можно передать true либо
// массив. Например, [1,1,1,1,0,0,0,0] запретит ресайз по диагонали
notDraggable: false // запретить перенос окна
}


Также будут обработчики событий onDrag, onDragStart, onDragEnd, onResize, onResizeStart, onResizeEnd и off-функции для удаления обработчиков (напр. offResizeStart).

- поиск ответа на вопрос "А нахера?":

Тут ничего конкретно обещать не могу.

[psiklop]

Я тоже один раз давно этим 'страдал', сам себя спросил "А нахера", dialog был в jquery ui