Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.02.2017, 17:31
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Всплывающие окна
Хз зачем я это сделал

Демо-страница
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, 02.02.2017 в 18:47.
Ответить с цитированием
  #2 (permalink)  
Старый 02.02.2017, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Diphenyl Oxalate,
для общего развития http://www.vanillalist.com/?Search=Modal
Ответить с цитированием
  #3 (permalink)  
Старый 02.02.2017, 19:17
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

Тестовая страничка: все возможности Dialog Box
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2017, 15:38
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

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

- функция 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).

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

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

Последний раз редактировалось Diphenyl Oxalate, 03.02.2017 в 15:50.
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2017, 00:06
Профессор
Отправить личное сообщение для psiklop Посмотреть профиль Найти все сообщения от psiklop
 
Регистрация: 04.03.2015
Сообщений: 163

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Рандомные всплывающие окна при заходе на сайт MrNix21 Работа 27 24.06.2015 17:15
Таймер и всплывающие окна. Станислав89 Общие вопросы Javascript 2 05.12.2013 18:48
Всплывающие окна в контакте Михаил1 Элементы интерфейса 2 25.02.2012 22:26
Firefox 5. Перестали работать всплывающие окна mikel Общие вопросы Javascript 3 24.06.2011 13:36
Всплывающие окна Silа Общие вопросы Javascript 0 03.11.2009 12:56