popUp-окна средствами Битрикса

Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.

popUp-окна средствами Битрикса

Для тех кто хочет узнать как работают всплывающие окна на основе стандартной битриксовой библиотеки.

Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.

Что-то типа такого:

Начинается все с подключения самой библиотеки:

<?CUtil::InitJSCore( array('ajax' , 'popup' ));?>

Далее создадим объект:

 var addAnswer = new BX.PopupWindow(
         "my_answer",                
          null, 
         {
            content: BX( 'ajax-add-answer'),
            closeIcon: {right: "20px", top: "10px" },
            titleBar: {content: BX.create("span", {html: ‘<b>Это заголовок окна</b>’, 'props': {'className': 'access-title-bar'}})}, 
            zIndex: 0,
            offsetLeft: 0,
            offsetTop: 0,
            draggable: {restrict: false},
            buttons: [
               new BX.PopupWindowButton({
                  text: "Сохранить" ,
                  className: "popup-window-button-accept" ,
                  events: {click: function(){
                     this.popupWindow.close();
                  }}
               }),
               new BX.PopupWindowButton({
                  text: "Закрыть" ,
                  className: "webform-button-link-cancel" ,
                  events: {click: function(){
                     this.popupWindow.close();
                  }}
               })
            ]
         });

Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.

null - параметр «принадлежности окна» к какому-либо DOM-элементу на странице. Т.е. по дефолту окно всплывает в центре страницы. Хотите чтоб всплывало, на пример, рядом с какой-либо кнопкой, ставьте суда id элемента в виде $(‘#my_name_div’) или через битриксовый эквивалент BX (‘my_name_div’)

content - строка - здесь контент, который будет показан в окне. Можно прямо сюда указывать html или указать #div, в котором лежит нужный текст.

closeIcon: {right: "20px", top: "10px" } - показывает нужна ли вам иконка закрытия окна и ее положение в окне.

titleBar: {content: BX .create("span", {html: ‘Это заголовок окна’, 'props': {'className': 'access-title-bar'}})} - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание <span class=’access-title-bar’>Это заголовок окна</span>. Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.

zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false} - эти параметры указывают, что окно можно передвигать по странице.

buttons - кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX .PopupWindowButton с параметрами:
text - ‘название кнопки’
className - класс на кнопке, из стандартных возможны варианты: popup-window-button-accept - зеленая кнопка как на скрине, popup-window-button-cancel - белая кнопка, popup-window-button-link-cancel - просто ссылка. Само-собой можно приклеить свой стиль.

events: {click: function(){
this.popupWindow .close();
}}
Это параметр, отвечающий за действие, произошедшее при нажатии кнопки. В данном случае this.popupWindow .close(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач. На пример, если в окне форма, можно сделать ajax-отправку контента через

BX.ajax.submit(BX("myForm"), function(data){
   BX('ajax-add-answer').innerHTML = data;
});

Здесь BX ("myForm"

- id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.

Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.

Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.

Немного украшательств

<style>
<!--
#ajax-add-answer {
    display: none;
    width: 800px; 
    min-height : 400px;
}
-->
</style>

Подключим дефолтные библиотеки

<?CUtil::InitJSCore( array('ajax' , 'jquery' , 'popup' ));?>

Соответственно, если jquery есть, то подключать не надо.

<script type="text/javascript">
<!--
BX.ready(function(){
   
   var addAnswer = new BX.PopupWindow("my_answer", null, {
      content: BX('ajax-add-answer'),
      closeIcon: {right: "20px", top: "10px"},
      titleBar: {content: BX.create("span", {html: '<b>Обратная связь</b>', 'props': {'className': 'access-title-bar'}})},
      zIndex: 0,
      offsetLeft: 0,
      offsetTop: 0,
      draggable: {restrict: false},
      buttons: [
         new BX.PopupWindowButton({
            text: "Отправить",
            className: "popup-window-button-accept",
            events: {click: function(){
               BX.ajax.submit(BX("myForm"), function(data){ // отправка данных из формы с id="myForm" в файл из action="..."
                  BX( 'ajax-add-answer').innerHTML = data;
                });
            }}
         }),
         new BX.PopupWindowButton({
            text: "Закрыть",
            className: "webform-button-link-cancel",
            events: {click: function(){
               this.popupWindow.close(); // закрытие окна
            }}
         })
         ]
   }); 
   $('#click_test').click(function(){
      BX.ajax.insertToNode('/include/testform.php', BX('ajax-add-answer')); // функция ajax-загрузки контента из урла в #div
      addAnswer.show(); // появление окна
   });
});
//-->
</script>

Сама ссылка:

<a id="click_test" href="javascript:void(0)" >Клик</a>

Контейнер, который будет в окне и в который вставим форму по аяксу:

<div id="ajax-add-answer"></div>

Файл testform.php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?$APPLICATION->IncludeComponent("bitrix:main.feedback", "support",   
      Array(
         "USE_CAPTCHA" => "Y", 
         "OK_TEXT" => "Спасибо, ваше сообщение принято.", 
         "EMAIL_TO" => "st.dremin@ya.ru", 
         "REQUIRED_FIELDS" => array(), 
         "EVENT_MESSAGE_ID" => array()
         ),
      false);
if($_SERVER["REQUEST_METHOD"] == "POST")
{   
   echo '<pre>';
   print_r($_POST);
   echo '</pre>';
}?>

Кому интересно можете:

почитать здесь http://dev.1c-bitrix.ru/community/web...mi-bitrix/
здесь http://alexvaleev.ru/popup-window-bitrix/
или порыться в папке /bitrix/js/main/core/

Назад в раздел

Подписаться на новые материалы раздела:

Загрузка...