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

[Diphenyl Oxalate]

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

Демо-страница
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

[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