Red Spirit

Блог Алексея Таянчина

RSS 2.0

JA Modal v1.01 – jQuery плагин модальных окон

Это мой первый опыт создания плагинов для популярного фреймворка jQuery. Мой плагин называется JA Modal, он создает модальные информационные окна. Модальное значит, что во время отображения этого окна все другие элементы на странице становятся недоступными. Сейчас есть огромное множество плагинов для jQuery предназначеных для организации таких окон, однако, как это часто со мной бывает, по тем или иным причинам все рассмотренные мной плагины мне не подходили. Конечно, я рассматривал далеко не все их них, тем не менее, сделал окончательное решение о написании своих модальных окошек.

Первое, чего я хотел достигнуть – максимальная простота использование. Второе – гибкость в создании и оформлении окошек. Опять же следует упомянуть, писал этот плагин для себя, для использования в конкретном проекте, без учета на широкую аудиторию и без наличия всяких лишний наворотов.

Теперь о том, как его использовать и небольшая демка.

1. Будем думать, что jQuery у вас уже подключена и давно используется, так что добавляем только путь до плагина:

2. Создаем HTML-макет, в нем достаточно лишь поставить блок DIV, который будет содержать в себе все те элементы, что будут отображаться в модальном окне. Назначим блоку любой удобный идентификатор:

3. Не забудем и о стилях (но в принципе можно обойтись вовсе без стилей). Опишем стиль класса jamodal, это будут стили по-умолчанию для всех создаваемых окошек, делаем все по-простому:

4. Ну и, если необходимо, можно добавить какие-либо стили конкретному окошку с конкретным идентификатором. Обязательно! Добавьте к стилям блока “display:none;” чтобы он не вылазил где попало и когда не надо.

5. А теперь собственно создадим и покажем модальное окошко вызвав одну команду:

6. Но чтобы пользователь мог закрыть это окно, в него следует поместить кнопочку (или ссылку) с классом jamodal-close, если элемент с этим классом инициализирует событие onclick, то окно будет закрыто:

Вот и все использование. Но есть еще несколько дополнительных возможностей. При создании окна методом show_jamodal можно указать дополнительные параметры:

  • w – ширина окна
  • h – высота окна
  • content – HTML, который будет помещен в новое окно. Если он будет указан, то содержимое блока будет заменено содержимым content.

Пример:

При указании этих дополнительных параметров, они будут заменять собой указанные ранее значения. То есть даже если в стилях к этому окну у вас установлена одна высота и ширина, вы можете выставить совершенно другие размеры окна указав их в параметре. Этим достигается гибкость использования – одно и тоже окно можно вызывать с разными размерами и с разным контентом.

Также можно вызвав из своего JS-скрипта глобальную функцию close_jamodal() закрыть текущее открытое модальное окно. Это может быть полезным при использовании AJAX-а. Допустим, через модальное окно мы делаем запрос на сервер и в это время нам будет показываться некий индикатор (типа идет загрузка) и только после успешного выполнения запроса это окно можно закрыть.

Итоговая HTML-страничка с окошком будет выглядеть следующим образом:

История изменений:
02.02.2011: (v1.01) Исправлены косяки в отображении при скроллировании. Прибавлено кроссбраузерности.
25.01.2011: (v1.0) Первая версия

Просмотреть ДЕМО

Скачать плагин JA Modal v1.01

Categories: Мои проекты

  • falstaf

    Во-первых, велосипед. :)
    Во-вторых, close_jamodal в данном случае должен возвращать false, а не this. Обработчики эвентов вообще возвращают булево значение, которое jQuery возвращает уже браузеру, говоря ему, обрабатывать ли эвент или нет. Так как в пресловутом JA Modal возвращается не false, в строке адреса появляется при клике на “закрыть” неприятный ‘#’.
    В-третьих, использование глобальных переменных и функций начисто противоречит концепции jQuery. И вообще, глобальные переменные – плохой стиль программирования.
    В-четвертых, проблема с кодировкой на странице демо :)

  • Wolfas

    Плохо что, затмение не на всю страницу сайта, но ладно подправить легко =)

    jquery.ja-modal.js
    42 строка: ‘position’:’fixed’

    Подскажите плиз, мне необходимо вызывать команду:
    $(‘#googoo’).show_jamodal();
    только по ссылке, не через input

  • http://redspirit.ru Red Spirit

    Мм.. вообще странно, я для того и сделал длинные блоки в демке чтоб были полосы прокрутки и чтобы показать, что затмение остается на своем месте, а теперь смотрю оно стало вести себя не правильно. Спасибо, пофиксил!
    Если я правильно понял вопрос, то чтобы сделать вывод окошка по ссылке, надо этой ссылке написать свойство, типа id=”start”