Документация для разработчиков
Темная тема

BX.PopupWindowManager

BX.PopupWindowManager - обертка над BX.PopupWindow. Имеет две особенности в использовании:

  • Повторный вызов метода create - вернет уже существующий объект.
  • Открытие диалога, автоматически закрывает другой открытый диалог, созданный через BX.PopupWindowManager.
Метод Описание С версии
create(uniquePopupId, bindElement, params) Создает диалог. Точно также как и BX.PopupMenu.
isPopupExists(uniquePopupId) Проверяет существование диалога.
getCurrentPopup() Получает текущий диалог.

Пример

var popup = BX.PopupWindowManager.create("popup-message", null, {
	content: "Hello World!",
	darkMode: true,
	autoHide: true
});

popup.show();


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Константин Савин
Сообщение не промодерировано, возможны ошибки и неточности.
Dreamsite.all = function () {
$(document).ready(function() {
   $('.otus_popup_window').on('click', function(event) {
       event.preventDefault();
       var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
           content:
               '<select name="country" id="country">\n' +
               '  <option value="bra" selected>Бразилия</option>\n' +
               '  <option value="rus">Россия</option>\n' +
               '  <option value="ind">Индия</option>\n' +
               '  <option value="chn">Китай</option>\n' +
               '  <option value="zaf">ЮАР</option>\n' +
               '</select>\n' +
               '<select name="city" id="city">\n',
           width: 450, // ширина окна
           height: 450, // высота окна
           zIndex: 100, // z-index
           closeIcon: {
               opacity: 1
           },
           titleBar: 'Заголовок окна',
           closeByEsc: true, // закрытие окна по escЙ
           darkMode: false, // окно будет светлым или темным
           autoHide: false, // закрытие при клике вне окна
           draggable: true, // можно двигать или нет
           resizable: true, // можно ресайзить
           min_height: 250, // минимальная высота окна
           min_width: 100, // минимальная ширина окна
           lightShadow: true, // использовать светлую тень у окна
           angle: true, // появится уголок
           overlay: {
               backgroundColor: 'black',
               opacity: 500
           },
           buttons: [
               new BX.PopupWindowButton({
                   text: 'Записать', // текст кнопки
                   id: 'save-btn', // идентификатор
                   className: 'ui-btn ui-btn-success', // доп. классы
                   events: {
                       click: function() {
                           var inpone=$("#country").val();
                           var inptwo=$("#city").val();

                           BX.ajax({
                               url: '/ajax/ajax.php',
                               method: 'POST',
                               dataType: 'json',
                               data: {
                                   inp1: inpone,
                                   inp2: inptwo,
                               },
                               onsuccess: function(data) {
                                   console.log(data);
                                   $(location).prop('href', 'http://hooly.ru/ajax/ajax.php')
                               },
                               onfailure: function() {
                               }
                           });
                       }
                   }
               }),
               new BX.PopupWindowButton({
                   text: 'Закрыть',
                   id: 'copy-btn',
                   className: 'ui-btn ui-btn-primary',
                   events: {
                       click: function() {
                           popup.close();
                       }
                   }
               })
           ],
           events: {
               onPopupShow: function () {
                   var cities = {
                       bra: ["Сан-Паулу", "Рио-де-Жанейро"],
                       rus: ["Москва", "Санкт-Петербург"],
                       ind: ["Мумбаи", "Дели"],
                       chn: ["Шанхай", "Пекин"],
                       zaf: ["Йоханнесбург", "Кейптаун"]
                   };
                   var country = document.getElementById("country");
                   var city = document.querySelector("#city");
                   window.onl oad = selectCountry;
                   country.oncha nge = selectCountry;

                   function selectCountry(ev){
                       city.innerHTML = "";
                       var c = this.value || "bra", o;
                       for(let i = 0; i < cities[c].length; i++){
                           o = new Option(cities[c][i],i,false,false);
                           city.add(o);
                       };
                   }

               },
               onPopupClose: function () {
                   // $("#procid").val("");
               }
           }
       });
       popup.show();
   });
});
}
0
Андрей Чурсин
Сообщение не промодерировано, возможны ошибки и неточности.
для лоадера в окне (пока грузится контент) можно вставить старенький спиннер


content: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>',
10
Адель Юсупов
Сообщение не промодерировано, возможны ошибки и неточности.
Код
<?php

CJSCore::Init(['popup']);
?>

<sc ript>
    // BX.element - элемент, к которому будет привязано окно, если null – окно появится по центру экрана

    BX.ready(function () {
        var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
            content: 'Контент, отображаемый в теле окна',
            width: 400, // ширина окна
            height: 100, // высота окна
            zIndex: 100, // z-index
            closeIcon: {
                // объект со стилями для иконки закрытия, при null - иконки не будет
                opacity: 1
            },
            titleBar: 'Заголовок окна',
            closeByEsc: true, // закрытие окна по esc
            darkMode: false, // окно будет светлым или темным
            autoHide: false, // закрытие при клике вне окна
            draggable: true, // можно двигать или нет
            resizable: true, // можно ресайзить
            min_height: 100, // минимальная высота окна
            min_width: 100, // минимальная ширина окна
            lightShadow: true, // использовать светлую тень у окна
            angle: true, // появится уголок
            overlay: {
                // объект со стилями фона
                backgroundColor: 'black',
                opacity: 500
            }, 
            buttons: [
                new BX.PopupWindowButton({
                    text: 'Сохранить', // текст кнопки
                    id: 'save-btn', // идентификатор
                    className: 'ui-btn ui-btn-success', // доп. классы
                    events: {
                      click: function() {
                          // Событие при клике на кнопку
                      }
                    }
                }),
                new BX.PopupWindowButton({
                    text: 'Копировать',
                    id: 'copy-btn',
                    className: 'ui-btn ui-btn-primary',
                    events: {
                      click: function() {

                      }
                    }
                })
            ],
            events: {
               onPopupShow: function() {
                  // Событие при показе окна
               },
               onPopupClose: function() {
                  // Событие при закрытии окна                
               }
            }
        });

        popup.show();
    });
</sc ript>
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх