myModal 1.2 - Модальные окна
827материалов
228тем на форуме
3004комментария
6159пользователей

myModal 1.2 - Модальные окна


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

И, разумеется, подключить их на сайт (перед < /head>):
Код
<script src="http://адрес_сайта/jquery.ui.custom.js"></script>   
<script src="http://адрес_сайта/jquery.mymodal.js"></script>

После чего устанавливаем стили. Их вы можете настроить, как душе угодно 
Код
/* 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.[color=#1e84cc]set[/color](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 - эффекты появления и исчезновения окна. Список, а так же демонстрацию эффектов вы можете увидеть на оф. сайте [url=http://u.to/lVD3Aw]jQuery UI.[/url]

Функция закрытия окна 
Код
myModal.close(id);

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

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.07.2013 в 23:32
Материал просмотрен: 838 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта