How to display a popup window with the standard bx library in the lead card?

Question

Bitrix24

<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.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>

I found such a code, I need a popup window to appear when the card is opened, as I understand it, you need to insert the code into the template itself, the question is where to find it?

Answer 1

the template itself, the question is where to find it?

Any such modification is a change in the functional part of the system, i.e. With any update, it will be necessary to check whether something is broken.
How can this decision be put into practice?
1) Customize the template of the bitrix:crm.lead component and place the code in details.php
Pros:
- Minimal change
- The template changes very rarely
Cons:
- Will have to be maintained until the end of the project with any update
2) Customize the template of the bitrix:crm.lead.details component
Pros:
- Minor change
- You can partially rely on the lead fields
Cons:
- Will have to support until the end of the project with any update
3) Do it through JS.
At the epilogue event, connect a library that will check the desired page and display a popup
Pros:
- Does not affect updates
Cons:
- Not easy to develop (requires deep knowledge of the platform)
- It will be more difficult to maintain if Bitrix changes api / cnc
Documentation for all 3 no way to find it on the internet.

Answer 2

1. URL validation
   
2. Connect js script
   

and embed the necessary buttons and events in js

Answer 3

yes ********* Bitrix24.
I made a modal window on click that displays its form. but it duplicated the modal every time.
spit once. output the function separately, and on click add the desired content via setContent.
but as soon as I brought it to a separate variable, this abomination throws out errors: