Перейти к основному содержимому

welpodron.modal

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

<div id="modal_example" data-modal>
  <div>
    <div>
      <p>
        <b>(modal)</b> Это некий заполнитель для содержимого модального окна. По
        умолчанию он скрыт. Для того чтобы открыть содержимое модального окна
        можно воспользоваться следующими <b>(data-action)</b> у
        <b>(modal.control)</b>: <b>(show)</b>. Для того чтобы скрыть содержимое
        модального окна можно воспользоваться следующими <b>(data-action)</b> у
        <b>(modal.control)</b>: <b>(hide)</b>.
      </p>
      <p>
        Также модальное окно можно закрыть нажав клавишу <b>Esc</b> или
        <b>щелкнув левой кнопкой мыши вне содержимого модального окна</b>
      </p>
      <button data-action="hide" data-modal-id="modal_example" type="button">
        <b>(modal.control)</b> <b>(hide)</b> Скрыть модальное окно (при открытии
        модального окна фокус попадет на меня и застрянет внутри модального окна)
      </button>
    </div>
  </div>
</div>

<button data-action="show" data-modal-id="modal_example" type="button">
  <b>(modal.control)</b> <b>(show)</b> Показать модальное окно
</button>

Установка / Подключение​

Список PHP библиотек:

  • welpodron.core

Список зависимостей:

Внимание

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

Установка и подключение компонента происходит в соответствии с документацией

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

Использование через HTML​

html
...
<div data-modal-id="modal_id" data-action="[show] [hide]" [data-args]>
  Это modal.control ...
</div>
...
<div id="modal_id" data-modal [data-force] [data-once]>Это modal ...</div>

HTML атрибуты​

  • Атрибут: id
    • Описание: Уникальный идентификатор компонента
    • Обязателен: Да
  • Атрибут: data-modal
    • Описание: Указатель компонента
    • Обязателен: Да
  • Атрибут: data-force
    • Описание: Показать содержимое модального окна сразу же после загрузки страницы
    • Обязателен: Нет
  • Атрибут: data-once
    • Описание: После скрытия своего содержимого модальное окно будет уничтожено
    • Обязателен: Нет

modal.control​

  • Атрибут: data-modal-id
    • Описание: Идентификатор modal
    • Обязателен: Да
    • Возможные значения: Значение атрибута id у modal
  • Атрибут: data-action
    • Описание: Экшн компонента
    • Обязателен: Да
    • Возможные значения:
      • show
        • Описание: Показать содержимое модального окна
      • hide
        • Описание: Скрыть содержимое модального окна