Диалоговые окна (всплывающие) на языке javascript.
Представляем уже готовое всплывающее диалоговое окно для использования на любом сайте. Даже начинающий программист сможет с лёгкостью использовать данный скрипт.
Значительная часть сприпта была переписана.
Дата крайней публикации: 15.11.2014
Разрешено бесплатное использование скрипта и его модификаций в некоммерческих целях.
Для использования скрипта в коммерческих целях запросите разрешение у автора. Или пожертвуйте любую сумму на один из электронных кошельков с пометкой (Диалоговые окна):
QIWI: 901 371 81 06
WebMoney: R174324960197
Яндекс.Деньги: 410011513132981
Файлы скрипта, и пример использования можно скачать здесь
Подробная документация:
- Подключаем скрипт на страницу:
<script language=javascript src="js/dialog.js"></script>
Подразумевается, что скрипты лежат в папке js/ относительно страницы.
Адрес может отличаться, но помните, что скрипт будет подключать другие файлы относительно себя. - Применяем функцию:
dialog("url",{Объект параметров окна}, функция, аргументы);
Обязательным является только первый аргумент url - адрес картинки или страницы.
Через второй аргумент можно передать объект, описывающий ряд свойств диалогового окна:- title - Заголовок всплывающего окна
По умолчанию пустая строка. - caption - Подпись под диалоговым окном
По умолчанию пустая строка. - width - Ширине окна.
По умолчанию равна минимальной ширине содержания окна, но не больше ширины клиентской области. - height - Высота окна.
Если не указывать, равна высоте контента окна, но не больше высоты клиентской области. - x - Координата верхнего левого угла диалогового окна.
Если не указывать, то окно будет центрироваться по ширине. - y - Координата верхнего левого угла.
По умолчанию всплывающее окно будет центрироваться по высоте рабочей области браузера. - id - Идентификатор окна.
Если на странице нужно открыть несколько разных окон, то нужно указать этот аргумент. По умолчанию id = "dialog". - css - Путь к файлу стилей.
Значение по умолчанию - "../css/dialog.css". Путь к файлу указывается относительно скрипта dialog.js - html - Путь к файлу шаблона.
Если есть необходимость поменять структуру окна, то можно указать путь к шаблону новой структуры. (см. пример html/dialog.html в файлах скрипта)
- title - Заголовок всплывающего окна
Примечание:
В файле стилей css/dialog.css можно редактировать внешний вид окна.
Указав шаблон, можно редактировать структуру окна.
Таким образом, скрипт позволяет создать диалоговое окно (всплывающее) с произвольной формой и оформлением. Ограничением будет только ваша фантазия.
Третьим аргументом можно указать функцию, которая будет выполнена по окончанию загрузки всплывающего окна, последующие переданные аргументы будут передаваться в качестве аргументов уже этой функции.
Пример всплывающего окна:
<a onclick="dialog( 'files/logo.png', {'title':'Пример окна'} )">Открой меня</a>
открыть фотографию
открыть страницу в всплывающем окне
открыть страницу с другого домена
открыть часть документа в новом окне
открыть фото в заданном масштабе и месте
открыть диалоговое окно с другим стилем
открыть диалоговое окно с другим шаблоном
Анимация всплывающего окна
Для создания нужного вам эффекта появления окна, редактируйте файл стилей dialog.css. Класс .dialog-open описывает окно, открывающееся в заданных координатах. А класс .dialog-center описывает окно, открывающееся по центру.
Описание объекта Dialog
Свойства:
id:[String] Идентификатор окна
url:[String] Адрес картинки или страницы
width:[String | Number] Ширина окна
height:[String | Number] Высота окна
x:[String | Number] Координата X позиции окна
y:[String | Number] Координата Y позиции окна
title:[String] Заголовок
caption:[String] Подпись
css:[String] Адрес файла стилей
html:[String] Адрес шаблона структуры
tpl:[String] Текущий шаблона структуры
link:[HTML element] Ссылка на html-элемент Style
data:[HTML element] Ссылка на html-элемент содержания окна
window:[HTML element] Ссылка на html-элемент корневого элемента окна
fn:[Function] Функция срабатывающая по загрузке окна
arg:[Array] Аргументы функции срабатывающей по завершению загрузки окна
Методы:
type()
Метод возвращает тип данных диалогового окна:
0 - картинка
1 - другое содержание
inc(String:адрес скрипта)
Метод подключает файл типа js
path()
Метод возвращает путь до текущего скрипта dialog.js
style(Object:объект диалогового окна)
Метод подключает файл стилей для диалогового окна и возвращает ссылку на html элемент Style
client()
Метод возвращает объект со свойствами браузера и документа:
scrollTop - прокрученная клиентская область сверху
scrollLeft - прокрученная клиентская область слева
height - высота документа
width - ширина документа
clientHeight - высота клиентской области
clientWidth - ширина клиентской области
open(String:шаблон структуры окна, Object:объект диалогового окна)
Метод начинает загрузку окна
hide()
Метод скрывает окно
show()
Метод показывает скрытое окно
close()
Метод закрывает окно
delete()
Метод удаляет экземпляр объекта
onload()
Метод завершает загрузку, определяет ширину и положение диалогового окна