Модальные окна — 1С Битрикс?

Question

[Mansher]

Добрый день! Подскажите как реализовать модальное окно с текстом. В карточке товара есть ссылка "Наши преимущества", необходимо, чтобы при нажатии на неё меня не перекидывало на новую страницу, а открывалось модальное окно с затемнёным фоном, а в нём был текст о компании.

Answer 1

[Сергей Пантелеев]

Можно использовать, например, библиотеку из ядра:
BX.PopupWindowManager - https://dev.1c-bitrix.ru/api_help/js_lib/popup/pop...

Пример

<?php

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

<a href="#" id="element">Ссылка</a>

<script>
    // 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();
    });
</script>

Answer 2

[Никита]

дело же не в битриксе, а в вас :)

Берете любой плагин с модалочкой (можно фансибокс), генерите окно в шаблоне, и на кнопочку вызываете его

Answer 3

[Mansher]

Сделала посредством CSS! Теперь другой вопрос- у меня 13 разделов на сайте, как сделать чтобы при клике на одну и туже ссылку, в модальном окне отображался текст соответствующего раздела? У каждого раздела свой ID-как привязать не знаю.