Различия
Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
abills:docs:development:modules:modals [2015/10/10 01:06] anton [Особые окна] |
abills:docs:development:modules:modals [2016/11/10 15:34] (текущий) anton [Открытие обычного (HTML) модального окна при загрузке страницы] |
||
---|---|---|---|
Строка 3: | Строка 3: | ||
Есть 2 реализации: старая через глобальные функции и новая с использованием ''AModal''\\ | Есть 2 реализации: старая через глобальные функции и новая с использованием ''AModal''\\ | ||
+ | Создание кнопки вызова модального окна в Perl коде выглядит так: | ||
+ | <code> | ||
+ | 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' | ||
+ | } ); | ||
+ | } | ||
+ | </code> | ||
Ниже представлено описание основных методов | Ниже представлено описание основных методов | ||
Строка 8: | Строка 21: | ||
Для показа используется объявленное в metategs.tpl модальное окно ''#PopupModal'', контент для показа загружается непосредственно внутрь блока, или в блок ''#modalContent'' \\ | Для показа используется объявленное в metategs.tpl модальное окно ''#PopupModal'', контент для показа загружается непосредственно внутрь блока, или в блок ''#modalContent'' \\ | ||
- | === loadToModal (url) === | + | === loadToModal (url, [callback]) === |
Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно. | Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно. | ||
- | === openDataInModal(data, decorated, withoutButton) === | + | === loadRawToModal (url, [callback]) === |
+ | Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.\\ | ||
+ | **Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным** | ||
+ | |||
+ | === loadDataToModal(data, decorated, withoutButton) === | ||
Вставляет в модальное окно то, что передано в ''data''. \\ | Вставляет в модальное окно то, что передано в ''data''. \\ | ||
Если decorated=true, то ''data'' обёртывается в тело модального окна. | Если decorated=true, то ''data'' обёртывается в тело модального окна. | ||
Строка 28: | Строка 45: | ||
Объект представляет собой реализацию конкретной части паттерна Builder.\\ | Объект представляет собой реализацию конкретной части паттерна Builder.\\ | ||
Пример использования: | Пример использования: | ||
+ | Показать сообщение в модальном окне: | ||
+ | |||
<code> | <code> | ||
- | aModal = new AModal(); | + | var modal = aModal.clear() |
+ | .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>') | ||
+ | .show(); | ||
+ | </code> | ||
+ | |||
+ | Показ сложного модального окна с обработчиком кнопки | ||
+ | <code> | ||
+ | // Для того чтобы не забивать память созданием нового обьекта, | ||
+ | // просто очищаем предыдущее модальное окно | ||
+ | modal = aModal.clear(); | ||
- | aModal | + | modal |
+ | // Устанавливаем id (необязательно) | ||
.setId('modalTest') | .setId('modalTest') | ||
+ | | ||
+ | // Устанавливаем modal-header (необязательно) | ||
.setHeader('Header') | .setHeader('Header') | ||
+ | | ||
+ | // Устанавливаем modal-body (необязательно) | ||
.setBody('<h2>One fine body</h2>') | .setBody('<h2>One fine body</h2>') | ||
+ | | ||
+ | // Устанавливаем modal-footer (необязательно) | ||
.setFooter('Footer') | .setFooter('Footer') | ||
- | .show(); | + | |
+ | // Добавляем кнопку закрытия (необязательно, в header есть крестик) | ||
+ | .addButton('Cancel', 'modalCancelBtn', 'default') | ||
+ | |||
+ | // Показываем и устанавливаем обработчик (необязательно) | ||
+ | .show(function(){ | ||
+ | // Устанавливаем обработчики. | ||
+ | // Спрятать модальное окно по клику на кнопку '#modalCancelBtn' | ||
+ | $('#modalCancelBtn').on('click', aModal.hide); | ||
+ | } | ||
+ | ); | ||
+ | | ||
</code> | </code> | ||
- | |||
==== Особые окна ==== | ==== Особые окна ==== | ||
- | Если нужно использовать особые параметры модального окна, можно использовать метод setRawData(true).\\ | + | Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ |
- | При этом, значение, установленное через ''setBody()'' будет вставлено вместо ''.modal-content'' | + | особое окно будет без заголовка и футера, можно вставлять собственные. |
+ | При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content'' | ||
+ | |||
+ | Пример: | ||
+ | <code> | ||
+ | var modal = aModal.clear(); | ||
+ | |||
+ | modal.setRawMode(true) | ||
+ | .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>') | ||
+ | .show(); | ||
+ | </code> | ||
+ | |||
+ | ==== Открытие обычного (HTML) модального окна при загрузке страницы ==== | ||
+ | Нужно прописать аттрибут ''data-open='1'''. Удобно использовать для этого переменную шаблона. | ||
+ | Если есть несколько окон, которые нужно открыть, откроется первое найденное (обычно, которое прописано выше). | ||
+ | <code> | ||
+ | <div class='modal fade' id='changeCreditModal' data-open='%OPEN_CREDIT_MODAL%'> | ||
+ | </code> |