Модальные окна на Preline HSOverlay — Документация Easyweb

В теме Seller 2.0 модальные окна реализованы на базе Preline UI (HSOverlay), а не Bootstrap. Это означает другую разметку, другие атрибуты и другие CSS-классы.

Как работают модальные окна

Модальные окна в Seller 2.0 используют компонент HSOverlay из библиотеки Preline UI. Открытие окна происходит через атрибут data-hs-overlay на кнопке-триггере, а само окно имеет класс hs-overlay.

Документация Preline UI: https://preline.co/docs/overlay.html

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

Приведем пример простого модального окна, которое открывается при нажатии на кнопку. Разметка построена по образцу модального окна поиска самой темы, поэтому все используемые классы присутствуют в собранном CSS темы.

HTML разметка

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

<!-- Кнопка-триггер -->
<button type="button"
        class="btn btn-theme btn-base"
        data-hs-overlay="#myCustomModal">
    Открыть окно
</button>

<!-- Модальное окно -->
<div id="myCustomModal"
     class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-overlay-modal opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none"
     role="dialog"
     tabindex="-1"
     aria-labelledby="myCustomModalLabel">

    <div class="hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
        <div class="w-full flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">

            <!-- Заголовок -->
            <div class="flex justify-between items-center py-3 px-4 border-b dark:border-neutral-700">
                <h3 id="myCustomModalLabel" class="font-bold text-gray-800 dark:text-white">
                    Мое модальное окно
                </h3>
                <button type="button"
                        class="size-8 inline-flex justify-center items-center rounded-full bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-600"
                        data-hs-overlay="#myCustomModal">
                    <span class="sr-only">Закрыть</span>
                    <svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- Содержимое -->
            <div class="p-4 overflow-y-auto">
                <p class="text-gray-800 dark:text-neutral-400">
                    Внутри модального окна можно разместить текст, форму, изображение или любой другой контент.
                </p>
            </div>

            <!-- Подвал (опционально) -->
            <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-neutral-700">
                <button type="button"
                        class="btn btn-neutral btn-base"
                        data-hs-overlay="#myCustomModal">
                    Закрыть
                </button>
                <button type="button" class="btn btn-theme btn-base">
                    Сохранить
                </button>
            </div>

        </div>
    </div>
</div>

Обратите внимание на id="myCustomModal" — именно этот ID используется в атрибуте data-hs-overlay для связи кнопки с окном.

Кнопки в теме собираются из базового класса btn, класса цвета и класса размера. Доступные классы цвета: btn-theme (основной цвет темы), btn-neutral, btn-white, btn-dark, btn-outline-theme, btn-outline-white и другие; размеры: btn-2xs, btn-xs, btn-sm, btn-base, btn-md, btn-lg, btn-xl. Классов btn-primary / btn-secondary из Bootstrap в теме нет.

Основные CSS-классы

Класс	Описание
`hs-overlay`	Базовый класс overlay-элемента
`hs-overlay-open:opacity-100`	Плавное появление при открытии
`hs-overlay-open:duration-500`	Длительность анимации
`z-overlay-modal`	Z-index модального окна (2200)

Открытие модального окна

Через data-атрибут

Добавьте атрибут data-hs-overlay с селектором модального окна на любой кликабельный элемент:

<!-- Кнопка -->
<button type="button" data-hs-overlay="#myCustomModal">
    Открыть окно
</button>

<!-- Ссылка -->
<a href="javascript:;" data-hs-overlay="#myCustomModal">
    Открыть окно
</a>

Программно через JavaScript

Вы можете открыть модальное окно программно, используя HSOverlay:

// Получить элемент
const modalEl = document.querySelector('#myCustomModal');

// Открыть
HSOverlay.open(modalEl);

// Закрыть
HSOverlay.close(modalEl);

Настройки через атрибуты

Атрибут / класс	Описание
`data-hs-overlay="#id"`	Связывает триггер с overlay по ID
`[--overlay-backdrop:static]`	Окно не закрывается при клике на фон
`[--overlay-backdrop:false]`	Фон (backdrop) не создаётся

По умолчанию (без класса [--overlay-backdrop:...]) окно закрывается при клике на фон.

Закрытие модального окна

Для закрытия окна изнутри используйте кнопку с тем же атрибутом data-hs-overlay — именно этот атрибут переключает окно, отдельного CSS-класса для кнопки закрытия нет:

<button type="button" data-hs-overlay="#myCustomModal">
    Закрыть
</button>

События

HSOverlay поддерживает события жизненного цикла:

const modalEl = document.querySelector('#myCustomModal');

// Событие при открытии
modalEl.addEventListener('open.hs.overlay', () => {
    console.log('Модальное окно открыто');
});

// Событие при закрытии
modalEl.addEventListener('close.hs.overlay', () => {
    console.log('Модальное окно закрыто');
});

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

Добавьте вызов модального окна по клику на элемент в карточке товара. Для этого укажите атрибут data-hs-overlay="#myCustomModal" на нужном элементе или используйте ссылку с этим атрибутом в настройках темы дизайна.

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