Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия
Предыдущая версия
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''​\\ Есть 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''​ обёртывается в тело модального окна.
Строка 28: Строка 45:
 Объект представляет собой реализацию конкретной части паттерна Builder.\\ Объект представляет собой реализацию конкретной части паттерна Builder.\\
 Пример использования:​ Пример использования:​
 +Показать сообщение в модальном окне:
 +
 <​code>​ <​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'​)         .setId('​modalTest'​)
 +        ​
 +        // Устанавливаем modal-header (необязательно)
         .setHeader('​Header'​)         .setHeader('​Header'​)
 +        ​
 +        // Устанавливаем modal-body (необязательно)
         .setBody('<​h2>​One fine body</​h2>'​)         .setBody('<​h2>​One fine body</​h2>'​)
 +        ​
 +        // Устанавливаем modal-footer (необязательно)
         .setFooter('​Footer'​)         .setFooter('​Footer'​)
-        .show();+        ​ 
 +        // Добавляем кнопку закрытия (необязательно,​ в header есть крестик) 
 +        .addButton('​Cancel',​ '​modalCancelBtn',​ '​default'​) 
 +         
 +        // Показываем и устанавливаем обработчик (необязательно) 
 +        ​.show(function(){ 
 +                // Устанавливаем обработчики.  
 +                // Спрятать модальное окно по клику на кнопку '#​modalCancelBtn'​ 
 +                $('#​modalCancelBtn'​).on('​click', ​ aModal.hide);​ 
 +              } 
 +       ); 
 +        ​
 </​code>​ </​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>​