Это старая версия документа.
Библиотека modals
Библиотека представлена файлом js/modals.js
. Позволяет ускорить процесс разработки с использованием модальных окон.
Есть 2 реализации: старая через глобальные функции и новая с использованием AModal
Ниже представлено описание основных методов
Глобальные функции
Для показа используется объявленное в metategs.tpl модальное окно #PopupModal
, контент для показа загружается непосредственно внутрь блока, или в блок #modalContent
loadToModal (url)
Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно.
openDataInModal(data, decorated, withoutButton)
Вставляет в модальное окно то, что передано в data
.
Если decorated=true, то data
обёртывается в тело модального окна.
Если withoutButton=true, то тело сгенерированного модального окна будет без кнопки.
showImgInModal(url)
Вставляет в модальное окно картинку, с атрибутом src
равным заданному url
Объект AModal
Свойства:
- id , дефолтное значение ('PopupModal')
- header
- body
- footer
- rawData
Объект представляет собой реализацию конкретной части паттерна Builder.
Пример использования:
Показать сообщение в модальном окне:
var modal = aModal.clear() .setBody('Самое обычное сообщение') .show();
Показ сложного модального окна с обработчиком кнопки
// Для того чтобы не забивать память созданием нового обьекта, // просто очищаем предыдущее модальное окно modal = aModal.clear(); modal //Устанавливаем id (необязательно) .setId('modalTest') //Устанавливаем modal-header (необязательно) .setHeader('Header') //Устанавливаем modal-body (необязательно) .setBody('<h2>One fine body</h2>') //Устанавливаем modal-footer (необязательно) .setFooter('Footer') //Добавляем кнопку закрытия (необязательно, в header есть крестик) .addButton('Cancel', 'default', 'modalCancelBtn') //показываем (необязательно) .show(); // Устанавливаем обработчик для кнопки в footer'e через 500 мс (чтобы окно успело показаться к моменту установки обработчика) setTimeOut(function(){ $('#modalCancelBtn').on('click', function(){ //Спрятать модальное окно aModal.hide(); }) }, 500);
Особые окна
Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).
При этом, значение, установленное через setBody()
будет вставлено внутрь .modal-content
Пример:
var modal = aModal.clear(); modal.setRawMode(true) .setBody('Самое обычное сообщение') .show();