Библиотека представлена файлом js/modals.js. Позволяет ускорить процесс разработки с использованием модальных окон.
Есть 2 реализации: старая через глобальные функции и новая с использованием AModal

Создание кнопки вызова модального окна в Perl коде выглядит так:

  my $load_to_modal_btn = $html->button( '', undef,
    {
      class          => 'btn btn-sm btn-default',
      JAVASCRIPT     => '',
      SKIP_HREF      => 1,
      NO_LINK_FORMER => 1,
      ex_params      => qq/onclick=loadToModal('?get_index=referral_show&header=2&USER_ID=$referrer_id')/,
      ICON           => 'glyphicon glyphicon-tree-deciduous'
    } );
  }

Ниже представлено описание основных методов

Для показа используется объявленное в metategs.tpl модальное окно #PopupModal, контент для показа загружается непосредственно внутрь блока, или в блок #modalContent

Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно.

Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.
Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным

Вставляет в модальное окно то, что передано в data.
Если decorated=true, то data обёртывается в тело модального окна. Если withoutButton=true, то тело сгенерированного модального окна будет без кнопки.

Вставляет в модальное окно картинку, с атрибутом src равным заданному url

Свойства:

• id , дефолтное значение ('PopupModal')
• header
• body
• footer
• rawData

Объект представляет собой реализацию конкретной части паттерна Builder.
Пример использования: Показать сообщение в модальном окне:

  var modal = aModal.clear()
                    .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>')
                    .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', 'modalCancelBtn', 'default')
        
        // Показываем и устанавливаем обработчик (необязательно)
        .show(function(){
                // Устанавливаем обработчики. 
                // Спрятать модальное окно по клику на кнопку '#modalCancelBtn'
                $('#modalCancelBtn').on('click',  aModal.hide);
              }
       );
        

Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).
особое окно будет без заголовка и футера, можно вставлять собственные. При этом, значение, установленное через setBody() будет вставлено внутрь .modal-content

Пример:

var modal = aModal.clear();

modal.setRawMode(true)
     .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>')
     .show();

Нужно прописать аттрибут data-open='1'. Удобно использовать для этого переменную шаблона. Если есть несколько окон, которые нужно открыть, откроется первое найденное (обычно, которое прописано выше).

  <div class='modal fade' id='changeCreditModal' data-open='%OPEN_CREDIT_MODAL%'>