450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

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

Компоненты

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

Версия раздела: 4.0.3

В SIMAI Framework модальнные окна позволяет создавать отдельные диалоговые окна и подгружать в них контент. Модальные могут размещаться как в центре, так и в любой части экрана. С помощью модификаторов вы можете изменять стиль офомрления модального окна, кнопки закрытия и подложки.

Структура

<section class="sf-modal-container">
<div class="sf-modal-overlay">
<div class="sf-modal-area">
<div class="sf-modal-content sf-scroll">
</div>
<button class="sf-close"></button>
</div>
</div>
</section>

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

Для вызова модального окна добавьте к элементу два data атрибута:

  • data-modal - атрибут указывающий что при клике на данный элемент произойдет вызов модального окна.
  • data-src - атрибут содержащий путь к файлу содержимому модального окна.

Дополнительно вы можете указать

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

<a href="#" class="btn btn-theme" data-modal data-src = "../../modal/default.php">Открыть окно</a>

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

С помощью дополнительных дата-атрибудтов вы можете изменять параметры запуска модального окна, фона, кнопки закрытия и контента.

data-атрибуты Описание
data-modal Инициализация модальное окна. Обязательный атрибут. Инициализирует запуск модального окна.
data-src Путь до файла. Обязательный атрибут. Указывает относительный путь к файлу с содержимым модального окна.
data-modal-modifier Модификаторы модального окна. Не обязательный атрибут. Позволяют изменять расположение модального окна и его размеры.
data-content-modifier Модификаторы контента модального окна. Не обязательный атрибут. Позволяют изменять параметры области контента (отступы, тема и т.д.)
data-overlayl-modifier Модификаторы подложки. Не обязательный атрибут. Позволяет изменять параметры подложки (цвет, прозрачность и т.д.)
data-close-modifier Модификаторы кнопки закрытия. Не обязательный атрибут. Позволяют изменить размер, расположение и цветовую схему кнокпи закрытия.
data-blur Атрибут для размытия фон. Добавляет класс .blur в слой .sf-pagewrap-area

С помощью модификаторов модального окна вы можете изменть расположение и размер модальных окон. По умолчанию, окно располгается по середине экрана и имеет следующую ширину:

  • При размере экрана lg и выше - 50% ширины экрана
  • При размере экрана менее md - 75% ширины экрана
  • При размере экрана менее sm - 85% ширины экрана
  • При размере экрана менее xs - 100% ширины экрана

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

С помощью адаптивных модификаторов ширины, вы можете задавать ширину экрана:

<a 
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-modal-modifier = "w-80 w-sm-75 w-md-60 w-lg-50 w-xl-30"
>Открыть окно</a>

При расположении кнопки закрытия за пределами окна, рекомендуется использовать для задания размера окна модификаторы расстояния:

<a 
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-right-top t-3 dark-theme"
data-modal-modifier = "w-100 mx-5 mx-md-6"
>Открыть окно</a>

Для изменения расположения модального окна используйте модификаторы положения:

<div class="btn-group" role="group" aria-label="Basic example">
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-right t-3 dark-theme"
data-modal-modifier = "fixed-left w-25"
>Слева</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-left t-3 dark-theme"
data-modal-modifier = "fixed-right w-25"
>Справа</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-bottom t-3 dark-theme"
data-modal-modifier = "fixed-top w-100 h-25"
data-content-modifier="h-100"
>Сверху</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-top t-3 dark-theme"
data-modal-modifier = "fixed-bottom w-100 h-25"
data-content-modifier="h-100"
>Снизу</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-modal-modifier = "fixed-top w-100 hv-100"
data-content-modifier="h-100"
>На весь экран</a>
</div>

Модификаторы области контента

С помощью модификаторов области контента вы можете изменять параметры содержимого модального окна

<a 
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/image.php"
data-close-modifier = "sf-close-right-top t-3 dark-theme"
data-modal-modifier = "w-auto mx-5 mx-md-6"
data-content-modifier="p-0"
>Открыть окно</a>

Модификаторы подложки

С помощью модификаторов вы можете изменить оформление подложки.

<a 
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-overlay-modifier = "bg-red"
>Открыть окно</a>

Размытие фона

Для размытия фона под подложкой используйте дата-атрибут data-blur:

<a 
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-overlay-modifier = "bg-red"
>Открыть окно</a>

Модификаторы кнопки закрытия

Для изменения оформления кнопки закрытия используйте модификаторы кнопки закрытия:

<div class="btn-group" role="group" aria-label="Basic example">
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
>По умолчанию</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "t-3"
>Больше</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-right-top t-3 dark-theme"
>Больше и снаружи</a>
</div>

Модификаторы кнопки закрытия

Для изменения оформления кнопки закрытия используйте модификаторы кнопки закрытия:

<div class="btn-group" role="group" aria-label="Basic example">
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
>По умолчанию</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "t-3"
>Больше</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-right-top t-3 dark-theme"
>Больше и снаружи</a>
</div>

Открытие вложенных окон

Вы можете из окон открывать вложенные окна. Количество вложенности не ограниченно:

<div class="btn-iframe" role="group" aria-label="Basic example">
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
>По умолчанию</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "t-3"
>Больше</a>
<a
href="#"
class="btn btn-theme"
data-modal
data-src = "../../modal/default.php"
data-close-modifier = "sf-close-right-top t-3 dark-theme"
>Больше и снаружи</a>
</div>

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

Вы можете из окон открывать вложенные окна. Количество вложенности не ограниченно:

<div class="btn-iframe" role="group" aria-label="Basic example">
	<a
	  href="#"
	  class="btn btn-theme"
	  data-modal
	  data-iframe
	  data-src = "../../modal/default.php">
	  По умолчанию
	</a>
</div>