1. Домашняя страница
  2. JavaScript
  3. Компоненты
  4. Модальное окно

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

Эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы

Превью

Содержимое управляемого элемента

Подключение

В случае если компонент поддерживает несколько способов подключения, используйте только тот, который больше подходит для проекта

Внимание!

Перед подключением компонента убедитесь, что все необходимые для требуемого компонента зависимости установлены и подключены!

Используя Bitrix

Для подключения компонента используется стандартный метод для работы с расширениями CJSCore::Init

php

CJSCore::Init(['welpodron.core.modal']);

Прямое подключение

Для подключения компонента используется комбинация тегов script и link

html

...
Здесь находятся подключение всех стилей, от которого зависит текущий подключаемый скрипт
...
<link rel="stylesheet" href="Путь к локально размещенному файлу стилей компонента">
...
Здесь находятся подключение всех зависимых от данного скрипта стилей
...
</head>

Использование

Компонент работает с помощью специальных HTML атрибутов, не забывайте указывать их в соответствии с документацией перед инициализацией компонента в JavaScript

HTML

Базовый HTML управляемого элемента

html

<div 
  data-w-modal
  [data-w-modal-active]  
  [data-w-modal-once]  
  data-w-modal-id="COMPONENT_ID"
>
  Содержимое управляемого элемента
</div>
АтрибутЗначенияОписание
data-w-modal *-Указатель компонента
data-w-modal-active-Указатель активности компонента
data-w-modal-once-Указатель на "одноразовость" компонента
data-w-modal-id *-Идентификатор компонента

Базовый HTML управляющего элемента

html

<button 
  data-w-modal-control
  [data-w-modal-control-active]
  data-w-modal-id="COMPONENT_ID"
  data-w-modal-action="ONE_OF_SUPPORTED_ACTIONS"
  [data-w-modal-action-args="ARGS_TO_PASS_TO_ACTION"]
  [data-w-modal-action-flush]
>
  Содержимое управляющего элемента
</button>
АтрибутЗначенияОписание
data-w-modal-control *-Указатель контрола
data-w-modal-control-active-Указатель активности контрола
data-w-modal-id *-Идентификатор компонента
data-w-modal-action *show, hideЭкшен компонента
data-w-modal-action-args-Аргументы передаваемые в экшен
data-w-modal-action-flush-Не использовать event.preventDefault()

JavaScript

Базовая инициализация экземпляра компонента

js

if (window.welpodron && window.welpodron.modal) {
  const instance = new window.welpodron.modal({
    element: document.querySelector('[data-w-modal][data-w-modal-id="COMPONENT_ID"]');
  })
}

Доступные методы экземпляра компонента welpodron.modal

async

show(options)

Переключение компонента в видимое состояние

АргументТипОписание
options *{ args?: unknown; event?: Event }Объект с опциями вызова метода
async

hide(options)

Переключение компонента в скрытое состояние

АргументТипОписание
options *{ args?: unknown; event?: Event }Объект с опциями вызова метода

Сворачиваемый контент

Табы