Модальное окно средствами Битрикс

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

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

Создаем js объект

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: 'Обратная связь', '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(); // появление окна
   });
});

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

Пример ссылки для открытия окна

Параметры объекта

my_answer — строка - уникальный id DOM-элемента, в который будет обернуто окно. Еcли на странице будет 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-элемента. В данном случае создание Это заголовок окна. Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.

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(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач.