Это старая версия документа.


Библиотека 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();