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

И, разумеется, подключить их на сайт (перед </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.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 окна, которое нужно закрыть.
Комментарии
avatar
0
1
Ссылки скриптов  битые пере залейте!
avatar