Плагин jqModal поможет вам вывести на странице предупреждения, диалоговые и модальные окна. Плагин гибок в настройках и является хорошей базой для показа всплывающих окон.

Скачать

Описание

  • Легкость настройки – использование ваших HTML+CSS структуры и стилей
  • Легко перевести интерфейс
  • Легко изменять – расширяемость функционала через callbacks-функции, что позволяет делать приложения разной сложности (слайд-шоу галереи, видео-презентации и т.д.)
  • Простая поддержка подгрузки содержания  (aka «AJAX»)
  • Поддержка нескольких окон одновременно  (в том числе окно-в-окне)

Установка

Необходимо подключить плагин, файл со стилями и опционально скрипт позволяющий перемещать и изменять размер окна

Настройка

Кэширование изображений
Некоторые браузеры не подгружают изображения и фоновый картинки, если они используются в спрятанном элементе (у родительского элемента заданы свойства display:none или hidden). Это может привести к тому, что графическое оформление всплывающего окна будет загружено только после вызова окна. На странице примеров используется дополнительный код, обеспечивающий предзагрузку изображений оформления окна.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- optional: image cacheing. Любые картинки, расположенные внутри этого блока будут загружены (они размещаются за пределами экрана) и закэшированы -->
<style type="text/css">
/* Caching CSS created with the help of;
Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
   div.imgCache { position: absolute; left: -8000px; top: -8000px; }
   div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<div class="imgCache">
   <img src="inc/busy.gif" />
   <img src="dialog/close.gif" />
   <img src="dialog/sprite.gif" />
   <img src="dialog/close_sprite.gif" />
   <img src="dialog/bl.gif" />
   <img src="dialog/br.gif" />
   <img src="dialog/bc.gif" />
   <img src="notice/note_icon.png" />
   <img src="notice/close_icon.png" />
</div>

Чтобы добавить диалоговое окно, фрейм или любое другое окно на сайт вам нужно:

Добавить на страницу контейнер (контейнеры) для всплывающих окон
В роли контейнера обычно выступает скрытый <div>, дочерний элемент <body>. CSS использутся для настройки внешнего вида и позиционирования. Этот блок будет отображен при наступление заданного события. Содержимое блока(текст/картинки/другое) может быть размещено в нем сразу (непосредственно в HTML) или может быть добавлено через  ajax,в момент показа блока.

Инициализация
jqModal может быть вызван для любого скрытого элемента при помощи функции  $.jqm(). Вы можете настроить ваше окно передавая параметры при инициализации плагина, на пример:

1

$('#dialog').jqm({modal: true, trigger: 'a.showDialog'})

$.jqm() должен вызываться только один раз для элемента! В особых случаях допускается повторный вызов – если вам необходимо изменить указанные ранее параметры. Повторный вызов $.jqm() обновит параметры вызова диалогового окна.

Вызов окна
Окно будет автоматически вызвано после клика по указанному элементу. Вы также можете показать окно вызвав функцию $.jqmShow()

Функции:

jqm - инициирует элемент(ы) используемые как  jqModal. Можно передать в качестве параметра объект. Если элемент(ы) уже инициированы, то повторный вызов обновит параметры.

1
2

$('#dialog').jqm();
$('.dialogs').jqm({ajax:'@href',modal:true});

jqmShow – показывает jqModal элемент(ы).

1
2

$('#dialog').jqmShow();
$('.dialogs').jqmShow();

jqmHide – скрывает jqModal элемент(ы).

1
2

$('#dialog').jqmHide();
$('.dialogs').jqmHide();

jqmAddTrigger – добавляет элемент(ы) вызывающие показ окна. Клик по этим элементам вызовет показ окна jqModal. Возможные значения:
  • (строка) jQuery селектор
  • (объект) jQuery коллекция
  • (объект) DOM элемент

1
2

$('#dialog').jqmAddTrigger('.openDialog');
$('.dialogs').jqmAddTrigger($('#openDialogs  a'));

jqmAddClose – Добавляет элемент(ы) вызывающие скрытие окна. Клик по ним приведет к скрытию окна jqModal. Возможные значения:

  • (строка) jQuery селектор
  • (объект) jQuery коллекция
  • (объект) DOM элемент

1
2

$('#dialog').jqmAddClose('.hideDialog');
$('.dialogs').jqmAddClose($('#hideDialogs  a'));

Параметры:

  • параметр
    значение по умолчанию
    описание
  • overlay
    50
    Прозрачность перекрывающего всю страницу слоя. При значение 0 все элементы страницы остаются активными
  • overlayClass
    ‘jqmOverlay’
    Класс указанный у перекрывающего слоя
  • closeClass
    ‘jqmClose’
    Когда окно показано, при клике по элементу с этим классом окно будет закрыто. Например если у вас есть <img class=»closeClass» src=»close.gif»> то по клику на этой картинке окно будет закрыто. Так же для закрытия можно использовать функцию $.jqmHide(). Возможные значения – строка|false
  • trigger
    ‘.jqModal’
    Элемент(ы) по клику на которых будет выведено модальное окно. Возможные значения – строка (селектор jQuery)|объект|false
  • ajax
    false
    Если параметр установлен, то данные будут загружены методом ajax. Вы можете указать url ($.jqm({ajax:’remote/dialog.html’})) или получить путь из значения какого-либо атрибута элемента-триггера ($(.jqm({ajax:’@href’})). Значения – строка|false
  • ajaxText
    » «
    Применим, только если определен параметр ajax. Строка, текст отображаемый до момента загрузки данных. Можно использовать html-теги. На пример $.jqm({ajaxText: ‘<marquee style=»width: 1.5em;»>.. … .</marquee>’});
  • target
    false
    Применим, только если определен параметр ajax. Если параметр определен, то данные от ajax будут загружены в указанный элемент.  Этот элемент обязательно должен быть потомком вызываемого окна. Возможные значения – строка (селектор jQuery)|объект ($.jqm({target: $(‘#dialog div.contents’)[0]}))|false
  • modal
    false
    Ограничивает ввод (клик мышкой, клавиатура) в окне. Обратите внимание: если установлено как false и задан параметр overlay, то клик по области за пределами окна приведет к его закрытию
  • toTop
    false
    При значение true добавляет элементы окна непосредственно как детей элемента <body>. Это делается чтобы избежать проблем с Z-индекс при перекрытие данных страницы
  • onShow
    false
    Пользовательская функция, вызываемая при показе диалогового окна
  • onHide
    false
    Пользовательская функция, вызываемая при скрытие диалогового окна
  • onLoad
    false
    Пользовательская функция, вызываемая когда данные ajax загружены

Категории: модальные окна

Похожие записи: ColorBox – галерея LightBox плагин для jQuery | tBlank – отслеживаем переход по внешним ссылкам |

Оставьте свой комментарий