Пройдемся по параметрам: 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 ("myForm" - id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.
Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.
Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.
Сейчас скопировал код и запустил на сайте - все работает. В консоли и редакторе тоже ошибок нет. На самом деле ту со скобками действительно можно запутаться, потому как идет создание объекта, в его свойстве новый объект, а в нем функция.
Вообще пример такой себе. Что нельзя писать вместо jquery BX ?
Вполне можно обойтись одним фреймворком.
А вот проблемма есть такая. Допустим вешаем на ссылку функцию, по клику на ней делаем объект и потом объект.show(); Идём в консоль или на стараницу. Нажимаем 1 раз выплывает всё как тут описано. Делаем close() нажимаем на ту же ссылку второй раз и уже ни кнопок ни контента.
Вопрос как это красиво обойти? Либо не париться и использовать core_window.js ?
Просто это окошко как-то попроще. всё что нужно для дум дизайна можно и в контентной части попапа записать .
Kurochka Artem написал: Вопрос как это красиво обойти? Либо не париться и использовать core_window.js ?
В таком случае надо грохать этот объект. Там суть в том, что при создании объекта еще создается контейнер с окном в DOM. Закрывая его, вы просто ставите display:none, а при нажатии снова, создаете объект с дивом и с тем же id. И библиотека видимо где-то на это ругается и вся красота херится.
Обойти это просто - нужно в объекте, при его создании использовать события. В данном случае - onPopupClose. Получиться так:
$('#click_test').click(function(){ BX.ajax.insertToNode('/include/testform.php', BX('ajax-add-answer')); // функция ajax-загрузки контента из урла в #div addAnswer.show(); // появление окна });
Можно вызывать окно не по ID, а через заданный дополнительно класс.
Еще можно добавить стрелку, чтобы было видно к какому элементу интерфейса принадлежит окно Для этого нужно добавить свойство angle: { "position": "top", "offset": 0 },//в данном примере стрелка вверх и вторым параметром BX.PopupWindow вместо null, указать принадлежность к элементу (например BX("myBtn") )
Большое спасибо! Все работает. У меня в модальном окне форма. $APPLICATION->IncludeComponent("bitrix:main.feedback" Письма уходят, но происходит переброс на другую страницу. А хотелось в том же всплывающем окне увидеть: Спасибо, ваше письмо отправлено!
Голубева Марина, Возможно проблема на стороне компонента bitrix:main.feedback. Данный скрипт как раз таки и добавляет ответ формы в этот же попап. Попробуйте добавить параметр AJAX_MODE => 'Y' в параметр компонента bitrix:main.feedback
Столкнулся с проблемой когда контент не подставляется в попап форму из необходимого блока, чтобы решить эту проблему, нужно воспользоваться методом addAnswer.setContent(data). В вышеупомянутом коде это будет выглядеть примерно так
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».