Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
abills:docs:development:modules:modals [2016/05/27 10:15] anton [Объект AModal] |
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> | ||
| Ниже представлено описание основных методов | Ниже представлено описание основных методов | ||
| Строка 12: | Строка 25: | ||
| === loadRawToModal (url, [callback]) === | === loadRawToModal (url, [callback]) === | ||
| - | Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно. | + | Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.\\ |
| + | **Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным** | ||
| - | === openDataInModal(data, decorated, withoutButton) === | + | === loadDataToModal(data, decorated, withoutButton) === |
| Вставляет в модальное окно то, что передано в ''data''. \\ | Вставляет в модальное окно то, что передано в ''data''. \\ | ||
| Если decorated=true, то ''data'' обёртывается в тело модального окна. | Если decorated=true, то ''data'' обёртывается в тело модального окна. | ||
| Строка 72: | Строка 86: | ||
| ==== Особые окна ==== | ==== Особые окна ==== | ||
| Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ | Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ | ||
| - | При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content'' | + | особое окно будет без заголовка и футера, можно вставлять собственные. |
| + | При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content'' | ||
| Пример: | Пример: | ||
| Строка 81: | Строка 96: | ||
| .setBody('<div class="alert alert-success text-center">Самое обычное сообщение</div>') | .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> | ||