Modal windows - 1C Bitrix?

Question

1C-Bitrix

Good afternoon! Tell me how to implement a modal window with text. In the product card there is a link "Our advantages", it is necessary that when I click on it, I would not be thrown to a new page, but a modal window would open with a darkened background, and it would contain text about the company.

Answer 1

You can use, for example, a library from the core:
BX.PopupWindowManager - https://dev.1c-bitrix.ru/api_help/js_lib/popup/pop...

Example

<?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

it's not about Bitrix, it's about you :)
Take any plugin with a modal (fansibox is possible), generate a window in the template, and call it with a button

Answer 3

Made with CSS! Now another question - I have 13 sections on the site, how can I make sure that when I click on the same link, the text of the corresponding section is displayed in the modal window? Each section has its own ID - I don’t know how to bind.