Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
abills:docs:development:modules:modals [2015/10/16 19:49] 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'' обёртывается в тело модального окна. | ||
| Строка 32: | Строка 49: | ||
| <code> | <code> | ||
| var modal = aModal.clear() | var modal = aModal.clear() | ||
| - | .setBody('Самое обычное сообщение') | + | .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>') |
| .show(); | .show(); | ||
| </code> | </code> | ||
| Строка 43: | Строка 60: | ||
| modal | modal | ||
| - | //Устанавливаем id (необязательно) | + | // Устанавливаем id (необязательно) |
| .setId('modalTest') | .setId('modalTest') | ||
| - | //Устанавливаем modal-header (необязательно) | + | |
| + | // Устанавливаем modal-header (необязательно) | ||
| .setHeader('Header') | .setHeader('Header') | ||
| - | //Устанавливаем modal-body (необязательно) | + | |
| + | // Устанавливаем modal-body (необязательно) | ||
| .setBody('<h2>One fine body</h2>') | .setBody('<h2>One fine body</h2>') | ||
| - | //Устанавливаем modal-footer (необязательно) | + | |
| + | // Устанавливаем modal-footer (необязательно) | ||
| .setFooter('Footer') | .setFooter('Footer') | ||
| - | //Добавляем кнопку закрытия (необязательно, в header есть крестик) | ||
| - | .addButton('Cancel', 'default', 'modalCancelBtn') | ||
| - | //показываем (необязательно) | ||
| - | .show(); | ||
| | | ||
| - | // Устанавливаем обработчик для кнопки в footer'e через 500 мс (чтобы окно успело показаться к моменту установки обработчика) | + | // Добавляем кнопку закрытия (необязательно, в header есть крестик) |
| - | setTimeOut(function(){ | + | .addButton('Cancel', 'modalCancelBtn', 'default') |
| - | $('#modalCancelBtn').on('click', function(){ | + | |
| - | //Спрятать модальное окно | + | // Показываем и устанавливаем обработчик (необязательно) |
| - | aModal.hide(); | + | .show(function(){ |
| - | }) | + | // Устанавливаем обработчики. |
| - | }, 500); | + | // Спрятать модальное окно по клику на кнопку '#modalCancelBtn' |
| + | $('#modalCancelBtn').on('click', aModal.hide); | ||
| + | } | ||
| + | ); | ||
| + | | ||
| </code> | </code> | ||
| - | |||
| ==== Особые окна ==== | ==== Особые окна ==== | ||
| Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ | Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ | ||
| - | При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content'' | + | особое окно будет без заголовка и футера, можно вставлять собственные. |
| + | При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content'' | ||
| Пример: | Пример: | ||
| Строка 74: | Строка 94: | ||
| modal.setRawMode(true) | modal.setRawMode(true) | ||
| - | .setBody('Самое обычное сообщение') | + | .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>') |
| .show(); | .show(); | ||
| + | </code> | ||
| + | |||
| + | ==== Открытие обычного (HTML) модального окна при загрузке страницы ==== | ||
| + | Нужно прописать аттрибут ''data-open='1'''. Удобно использовать для этого переменную шаблона. | ||
| + | Если есть несколько окон, которые нужно открыть, откроется первое найденное (обычно, которое прописано выше). | ||
| + | <code> | ||
| + | <div class='modal fade' id='changeCreditModal' data-open='%OPEN_CREDIT_MODAL%'> | ||
| </code> | </code> | ||