Различия

Здесь показаны различия между двумя версиями данной страницы.

--- 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''\\
+Создание кнопки вызова модального окна в 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'' \\
-=== loadToModal (url) ===
+=== loadToModal (url, [callback]) ===
 Динамически загружает страницу по заданному url, создаёт обьект aModal, устанавливает полученную страницу в modal-body и показывает новое модальное окно.
-=== openDataInModal(data, decorated, withoutButton) ===
+=== loadRawToModal (url, [callback]) ===
+Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.\\
+ **Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным**
+=== loadDataToModal(data, decorated, withoutButton) ===
 Вставляет в модальное окно то, что передано в ''data''. \\
 Если decorated=true, то ''data'' обёртывается в тело модального окна.
@@ Строка 28: / Строка 45: @@
 Объект представляет собой реализацию конкретной части паттерна Builder.\\
 Пример использования:
+Показать сообщение в модальном окне:
 <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')
+        // Устанавливаем modal-header (необязательно)
         .setHeader('Header')
+        // Устанавливаем modal-body (необязательно)
         .setBody('<h2>One fine body</h2>')
+        // Устанавливаем modal-footer (необязательно)
         .setFooter('Footer')
-        .show();
+        // Добавляем кнопку закрытия (необязательно, в header есть крестик)
+        .addButton('Cancel', 'modalCancelBtn', 'default')
+        // Показываем и устанавливаем обработчик (необязательно)
+        .show(function(){
+                // Устанавливаем обработчики.
+                // Спрятать модальное окно по клику на кнопку '#modalCancelBtn'
+                $('#modalCancelBtn').on('click',  aModal.hide);
+              }
+       );
 </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>