Различия

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

--- abills:docs:development:modules:modals [2016/05/27 10:09]
anton [Объект AModal]
+++ 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>
 Ниже представлено описание основных методов
@@ Строка 12: / Строка 25: @@
 === loadRawToModal (url, [callback]) ===
-Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.
+Динамически загружает страницу по заданному url, создаёт обьект aModal, вставляет даные телом модального окна и показывает новое модальное окно.\\
+ **Если данные не обернуты в div.modal-body или div.modal-content, фон модалки будет прозрачным**
-=== openDataInModal(data, decorated, withoutButton) ===
+=== loadDataToModal(data, decorated, withoutButton) ===
 Вставляет в модальное окно то, что передано в ''data''. \\
 Если decorated=true, то ''data'' обёртывается в тело модального окна.
@@ Строка 46: / Строка 60: @@
     modal
-        //Устанавливаем id (необязательно)
+        // Устанавливаем id (необязательно)
         .setId('modalTest')
-        //Устанавливаем modal-header (необязательно)
+        // Устанавливаем modal-header (необязательно)
         .setHeader('Header')
-        //Устанавливаем modal-body (необязательно)
+        // Устанавливаем modal-body (необязательно)
         .setBody('<h2>One fine body</h2>')
-        //Устанавливаем modal-footer (необязательно)
+        // Устанавливаем modal-footer (необязательно)
         .setFooter('Footer')
-        //Добавляем кнопку закрытия (необязательно, в header есть крестик)
+        // Добавляем кнопку закрытия (необязательно, в header есть крестик)
         .addButton('Cancel', 'modalCancelBtn', 'default')
-        //показываем (необязательно)
+        // Показываем и устанавливаем обработчик (необязательно)
-        .show();
+        .show(function(){
+                // Устанавливаем обработчики.
+                // Спрятать модальное окно по клику на кнопку '#modalCancelBtn'
+                $('#modalCancelBtn').on('click',  aModal.hide);
+              }
+       );
-    // Устанавливаем обработчик для кнопки в footer'e через 500 мс
-    // (чтобы окно успело показаться к моменту установки обработчика)
-    setTimeOut(function(){
-       $('#modalCancelBtn').on('click', function(){
-         //Спрятать модальное окно
-         aModal.hide();
-       })
-    }, 500);
 </code>
 ==== Особые окна ====
 Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\
- При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content''
+особое окно будет без заголовка и футера, можно вставлять собственные.
+При этом, значение, установленное через ''setBody()'' будет вставлено внутрь ''.modal-content''
 Пример:
@@ Строка 85: / Строка 96: @@
      .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>