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

В 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 атрибута:

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

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

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

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

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

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

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

Модификаторы модального окна

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

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

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

Изменение ширины окна

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

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

Изменение отступа окна от края

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

Открыть окно 
<a 
  href="#" 
  class="btn btn-theme" 
  sf-modal 
  sf-src = "../../modal/default.php" 
  sf-close-modifier = "sf-close-right-top t-3 theme-dark" 
  sf-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" 
		sf-modal 
		sf-src = "../../modal/default.php" 
		sf-close-modifier = "sf-close-right t-3 theme-dark" 
		sf-modal-modifier = "fixed-left w-25"
	>Слева</a>
	<a 
		href="#" 
		class="btn btn-theme" 
		sf-modal 
		sf-src = "../../modal/default.php" 
		sf-close-modifier = "sf-close-left t-3 theme-dark" 
		sf-modal-modifier = "fixed-right w-25"
	>Справа</a>
	<a 
		href="#" 
		class="btn btn-theme" 
		sf-modal 
		sf-src = "../../modal/default.php" 
		sf-close-modifier = "sf-close-bottom t-3 theme-dark" 
		sf-modal-modifier = "fixed-top w-100 h-25" 
		sf-content-modifier="h-100"	
	>Сверху</a>	
	<a 
		href="#" 
		class="btn btn-theme" 
		sf-modal 
		sf-src = "../../modal/default.php" 
		sf-close-modifier = "sf-close-top t-3 theme-dark" 
		sf-modal-modifier = "fixed-bottom w-100 h-25" 
		sf-content-modifier="h-100"	
	>Снизу</a>		
	<a 
		href="#" 
		class="btn btn-theme" 
		sf-modal 
		sf-src = "../../modal/default.php" 
		sf-modal-modifier = "fixed-top w-100 hv-100" 
		sf-content-modifier="h-100"	
	>На весь экран</a>			
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вызов модального окна с помощью JavaScript

Вы можете вызывать модальное окно с помощью функциональных возможностей JavaScript. 

<div class="modal py-2 px-3 d-inline-block shadow-2 hover:shadow-3 r-1" id="js-modal" style="cursor:pointer">Вызов</div>
<script>
	window.addEventListener('DOMContentLoaded', function(e) {
		var el = document.body.querySelector('#js-modal');
		if(el != null)
			new SF.Modal(
				el,
				{
					load: '<div class="sf-progress"><div class="sf-progress-animation"></div></div>',
					events: {
						init: 'modalinit',
						create: "modalcreate",
						open: 'modalopen',
						close: 'modalclose',
					},
					data: {
						init: 'sf-modal',
						src: 'sf-src',
						modal: 'sf-modal-modifier',
						content: 'sf-content-modifier',
						close: "sf-close-modifier",
						overlay: 'sf-overlay-modifier',
						blur: 'sf-blur',
						iframe: 'sf-iframe',
					},
					attributes: {
						overlay: 'sf-modal-overlay',
						load: 'sf-modal-loadanimation',
						modal: 'sf-modal-area',
						content: 'sf-modal-content',
						close: 'sf-modal-close',
						number: 'sf-modal-number',
						blur: "",
					},
					modifier: {
						src: '../../modal/position.php',
						service: 'sf-service-bottom-area',
						container: 'sf-modal-container',
						overlay: 'sf-modal-overlay',
						load: 'sf-modal-load',
						modal: 'sf-modal-area',
						content: 'sf-modal-content sf-scroll',
						close: 'sf-close',
						blur: 'blur',
						page: 'sf-pagewrap-area',
					},
				}
			);
	});
</script>