Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия
Предыдущая версия
abills:docs:development:modules:modals [2015/10/16 19:54]
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>​
 Ниже представлено описание основных методов Ниже представлено описание основных методов
  
Строка 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 есть крестик) +        // Добавляем кнопку закрытия (необязательно,​ в header есть крестик) 
-        .addButton('​Cancel',​ 'default', 'modalCancelBtn')+        .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>​ </​code>​
- 
 ==== Особые окна ==== ==== Особые окна ====
 Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\ Если нужно использовать особые параметры модального окна, можно использовать метод setRawMode(true).\\
- При этом, значение,​ установленное через ''​setBody()''​ будет вставлено внутрь ''​.modal-content''​+особое окно будет без заголовка и футера,​ можно вставлять собственные.  
 +При этом, значение,​ установленное через ''​setBody()''​ будет вставлено внутрь ''​.modal-content''​
  
 Пример:​ Пример:​
Строка 82: Строка 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>​