myModal 1.2 - Модальные окна для вашего сайта

Решил-таки "добить" этот скрипт до стабильной версии. В этой версии модальные окна получили функции перемещения и сворачивания + доступны эффекты появления/исчезания окна (На основе jQuery UI Draggable & Effects). Так же исправлен баг с зарезервированной переменной (new), теперь скрипт работает корректно в старых версиях браузеров. Вместо myModal.new теперь используется myModal.create.

UPD (14.07.2013): Исправлен баг при сворачивании окна. При обратном разворачивании окна оно не возвращало свою ширину, а становилось узким. Теперь все должно работать нормально. Тем, кто подключил скрипт с web41k'a: ничего делать не нужно, остальные - увы, перезалейте скрипт.

Что нужно?

Для работы скрипта необходимо загрузить на сайт 2 скрипта:

jquery.ui.custom (111.82 Kb)
jquery.mymodal.js (2.73 Kb) или jquery.mymodal.min.js (2.26 Kb, сжатая версия).

И, разумеется, подключить их на сайт (перед </head>):

Код

После чего устанавливаем стили. Их вы можете настроить, как душе угодно.

Код

/* myModal 1.3 */
.myModOver {background:rgba(0,0,0,.7);position:fixed;top:0;width:100%;height:100%;z-index:10000;}
.myModalWrap {position:fixed;z-index:10000;background:rgba(0,0,0,.2);padding:5px;color:#fff;}
.myModal {background:#7bbef3;box-sizing:border-box;height:100%;overflow:hidden;}
.myTitle {background:#66a6da;padding:15px;box-shadow:0 0 5px rgba(0,0,0,.45);font:12pt 'Myriad Pro',sans-serif;box-sizing:border-box;}
.myButs {float:right;font-size:24px;margin:-5px 0 0 0;}
.myBut {margin:0 5px;}
.myMes {font:11pt 'Myriad Pro',sans-serif;padding:10px;text-align:justify;}

Функция создания окна

Код

myModal.create(id,title,w,h,html,{modal,scroll,nomove,openanim,closeanim});

id - ID окна.
title - заголовок окна. Можно добавлять, как напрямую ('Текст'), так и через содержимое каких либо элементов на сайте ($('элемент').html()).
w и h - ширина и высота окна.
html - содержимое окна. Можно добавлять, как напрямую ('Текст'), так и через содержимое каких либо элементов на сайте ($('элемент').html()).
modal - закрывать ли остальное содержимое окна черным фоном? (true: да, false: нет).
scroll - настройки скролл-баров окна. (Доступные значения: auto, scroll, hidden. Значения по умолчанию указываются в CSS). Например: 'auto scroll' (Горизонталь и вертикаль) или 'hidden' (Горизонталь+вертикаль).
nomove - отключить возможность перемещения окна. (true: да, false: нет).
openanim и closeanim - эффекты появления и исчезновения окна. Список, а так же демонстрацию эффектов вы можете увидеть на оф. сайте jQuery UI.

Функция изменения настроек окна

Код

myModal.set(id,{title,cnt,w,h,modal,scroll,openanim,closeanim});

id - ID окна.
title - заголовок окна. Можно добавлять, как напрямую ('Текст'), так и через содержимое каких либо элементов на сайте ($('элемент').html()).
w и h - ширина и высота окна.
html - содержимое окна. Можно добавлять, как напрямую ('Текст'), так и через содержимое каких либо элементов на сайте ($('элемент').html()).
modal - закрывать ли остальное содержимое окна черным фоном? (true: да, false: нет).
scroll - настройки скролл-баров окна. (Доступные значения: auto, scroll, hidden. Значения по умолчанию указываются в CSS). Например: 'auto scroll' (Горизонталь и вертикаль) или 'hidden' (Горизонталь+вертикаль).
openanim и closeanim - эффекты появления и исчезновения окна. Список, а так же демонстрацию эффектов вы можете увидеть на оф. сайте jQuery UI.

Функция закрытия окна

Код

myModal.close(id);

id - ID окна, которое нужно закрыть.

О найденных багах, а так же о появившихся идеях по скрипту просьба писать в комментарии - хочется, наконец, доработать скрипт полностью. Заранее спасибо

Мне нравится 21

Просмотры: 3855 · Комментарии: 9 · Добавил: Kelin · Категория: Рецепты JavaScript

Порядок вывода комментариев: