Модальные окна

Начиная с версии 2023.10.9 в теме дизайна появилась возможность создавать пользовательские модальные окна.

Пример модального окна

Приведем пример простого окна, которое будет открывать при нажатии на ссылку.

HTML разметка модального окна

Для размещения окна на сайте мы создадим блок в приложении Сайт-Блоки site.seller_html и разместим там код:

<div class="modal fade" id="myCustomModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title fs-5">Мое модальное окно</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="fs-4">Внутри modal-body можно разместить текст, форму, изображение или любой другой контент</div>
            </div>
        </div>
    </div>
</div>

Стоит обратить внимание на id="myCustomModal" - именно с этим id элемента мы будем работать и дальше.

JS код для активации окна

Для того, чтобы окно открывалось по ссылке у элемента a или по классу у любого элемента, например, button, нам необходимо добавить код в блок site.seller_js:

{literal}
<script>

    //
    // CUSTOM MODALS
    //

    $(document).ready(function() {
        var modals = ["myCustomModal"];
        for (const modal of modals) {
            var $modal = $(`#${modal}`);
            if ($modal.length) {
                new window.waTheme.init.site.BootstrapModals({
                    $wrapper: $modal,
                    modal_id: modal
                });
            }
        }
    });

    //
    // END CUSTOM MODALS
    //

</script>
{/literal}

Теперь в любом месте шаблона вы можете вызвать модально окно по ссылке #myCustomModalShow или классу myCustomModalShow.

Если вы хотите активировать несколько окон, то в переменную modals добавьте элементы массива:

var modals = ["myCustomModal", "myDeliveryModal", "myPaymentModal"];

Пример в карточке товара

Добавим вызов модального окна по клику на элемент в карточке товара. Для этого укажем ссылку #myCustomModalShow для одного из элементов в настройках темы дизайна Список премуществ с иконками.

Теперь при нажатии на ссылку Обратная связь мы запустим модальное окно, которе создали ранее.

Вы можете проверить как это работает на демо-сайте Easyweb: Seller. Добавьте ссылку из примера в настройки темы.