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

modal
sm
md
lg
xl

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

Структура

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

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

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

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

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

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

JavaScript

var modal = new SF.Modal(
	'.js-init--btnModal',
	{
      	src : '/ru/modal/default.php'
   	}
);

HTML

<button sf-modal sf-src='/ru/modal/default.php' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex'>
	Открыть окно
</button>

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

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

JavaScript HTML Описание
- sf-modal Инициализация модальное окна. Обязательный атрибут. Инициализирует запуск модального окна.
src sf-src Путь до файла. Обязательный атрибут. Указывает относительный путь к файлу с содержимым модального окна.
overlay sf-overlay-modifier Модификаторы подложки. Не обязательный атрибут. Позволяет изменять параметры подложки (цвет, прозрачность и т.д.)
overlay-close sf-overlay-close Не закрывать модальное окно при клике на подложку. Отключено - значение по умолчанию
area sf-modal-modifier Модификаторы модального окна. Не обязательный атрибут. Позволяют изменять расположение модального окна и его размеры.
content sf-content-modifier Модификаторы контента модального окна. Не обязательный атрибут. Позволяют изменять параметры области контента (отступы, тема и т.д.)
close sf-close Модификаторы кнопки "Закрыть". Не обязательный атрибут. Позволяют изменить размер, расположение и цветовую схему кнокпи "Закрыть".
hide sf-hide Показать | Скрыть кнопку свернуть
hide-modifier sf-hide-modifier Модификаторы кнопки "Свернуть". Не обязательный атрибут. Позволяют изменить размер, расположение и цветовую схему кнокпи "Свернуть". Пример
blur sf-blur Атрибут для размытия фон. Добавляет класс .blur в слой .sf-pagewrap-area
autoload sf-autoload Предварительная загрузка модального окна
unclose sf-unclose Принудительный кеш данных модального окна
mode sf-mode Режим загрузки или отображения данных, ajax (по умолчанию), inline, image, video, iframe

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

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

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

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

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

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

JavaScript

Открыть окно 
var modal = new SF.Modal('.js-init--btnModal-1', {
    src : '/ru/modal/default.php',
    area: 'w-10/12 sm:w-9/12 md:w-7/12 lg:w-1/2 xl:w-4/12 relative'
  }
);

HTML

Открыть окно 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/default.php' sf-modal-modifier='w-10/12 sm:w-9/12 md:w-7/12 lg:w-1/2 xl:w-4/12 relative'>
	Открыть окно
</a>

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

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

JavaScript

Открыть окно 
var modal = new SF.Modal('.js-init--btnModal-2', {
    src : '/ru/modal/default.php',
    close: 'sf-close transition sf-close-right-top text-3 theme-dark',
    area: 'w-full mx-5 md:mx-6 relative'
  }
);

HTML

Открыть окно 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/default.php' sf-close='sf-close sf-close-right-top transition text-3 theme-dark' sf-modal-modifier='w-full mx-9 md:mx-9 relative'>
	Открыть окно
</a>

Изменение расположения окна

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

JavaScript

Слева Справа Сверху Снизу На весь экран 

	var modalL = new SF.Modal('.js-init--btnModal-3', {
			src : '/ru/modal/default.php',
			close: {
				modifier:'sf-close transition sf-close-right text-3 theme-dark',
				active:true
			},
			area: 'w-1/4 fixed left-0 h-full flex'
		}
	);
	var modalR = new SF.Modal('.js-init--btnModal-4', {
			src : '/ru/modal/default.php',
			close: {
				active: true,
				modifier:'sf-close transition sf-close-left text-3 theme-dark',
			},
			area: 'w-1/4 fixed right-0 h-full flex'
		}
	);
	var modalT = new SF.Modal('.js-init--btnModal-5', {
			src : '/ru/modal/default.php',
			close: {
				active:true,
				modifier:'sf-close transition sf-close-bottom text-3 theme-dark',
			},
			area: 'h-1/4 fixed top-0 w-full flex',
			content: 'overflow-auto bg-surface-0 bg-opacity-full p-1',
		}
	);
	var modalB = new SF.Modal('.js-init--btnModal-6', {
			src : '/ru/modal/default.php',
			close: {
				active:true,
				modifier:'sf-close transition sf-close-top text-3 theme-dark',
			},
			area: 'h-1/4 fixed bottom-0 w-full flex',
			content: 'overflow-auto bg-surface-0 bg-opacity-full p-1',
		}
	);
	var modalF = new SF.Modal('.js-init--btnModal-7', {
			src : '/ru/modal/default.php',
			area: 'w-full h-full fixed top-0 flex',
			content: 'overflow-auto bg-surface-0 bg-opacity-full p-1',
		}
	);

HTML

Слева Справа Сверху Снизу На весь экран 
<div class='inline-flex'>
	<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-left-1/3 radius-right-0 border-0' sf-modal sf-src='/ru/modal/default.php' sf-close='sf-close transition sf-close-right text-3 theme-dark' sf-modal-modifier='fixed left-0 w-1/4 h-full flex'>
		Слева
	</a>
	<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-0 border-0' sf-modal sf-src='/ru/modal/default.php' sf-close='sf-close transition sf-close-left text-3 theme-dark' sf-modal-modifier='fixed right-0 w-1/4 h-full flex'>
		Справа
	</a>
	<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-0 border-0' sf-modal sf-src='/ru/modal/default.php' sf-close='sf-close transition sf-close-bottom text-3 theme-dark' sf-modal-modifier='fixed top-0 w-full h-1/2 flex' sf-content-modifier='overflow-auto bg-surface-0 bg-opacity-full'>
		Сверху
	</a>	
	<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-0 border-0' sf-modal sf-src='/ru/modal/default.php' sf-close='sf-close transition sf-close-top text-3 theme-dark' sf-modal-modifier='fixed bottom-0 w-full h-1/2 flex' sf-content-modifier='overflow-auto bg-surface-0 bg-opacity-full'>
		Снизу
	</a>		
	<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-right-1/3 radius-left-0 border-0' sf-modal sf-src='/ru/modal/default.php' sf-modal-modifier='fixed top-0 w-full h-full flex' sf-content-modifier='overflow-auto bg-surface-0 bg-opacity-full'>
		На весь экран
	</a>
</div>

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

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

JavaScript

Открыть окно 

	var modal = new SF.Modal('.js-init--btnModal-8', {
			src : '/ru/modal/image.php',
			area: 'w-auto mx-9 md:mx-9 relative',
			content: 'overflow-auto bg-surface-0 p-0 bg-opacity-full',
			close: {
				active:true,
				modifier:'sf-close transition sf-close-right-top text-3 theme-dark',
			}
		}
	);

HTML

Открыть окно 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/image.php' sf-close='sf-close transition sf-close-right-top text-3 theme-dark' sf-modal-modifier='w-auto mx-9 md:mx-9 relative' sf-content-modifier='overflow-auto bg-surface-0 p-0 bg-opacity-full'>
	Открыть окно
</a>

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

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

JavaScript

Открыть окно 

	var modal = new SF.Modal('.js-init--btnModal-9', {
			src : '/ru/modal/default.php',
			overlay: 'sf-modal-overlay fixed w-full top-0 right-0 bottom-0 left-0 bg-surface-inverse-500 items-cross-center content-main-center bg-red',
		}
	);

HTML

Открыть окно 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/default.php' sf-overlay-modifier='sf-modal-overlay fixed w-full top-0 right-0 bottom-0 left-0 items-cross-center content-main-center bg-red'>
	Открыть окно
</a>

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

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

JavaScript

Открыть окно 

	var modal = new SF.Modal('.js-init--btnModal-10', {
			src : '/ru/modal/default.php',
			blur: true,
		}
	);

HTML

Открыть окно 
<a href="javascript:void(0)" class="cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex" sf-modal sf-src="/ru/modal/default.php" sf-blur>
	Открыть окно
</a>

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

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

JavaScript

По умолчанию Больше Больше и снаружи 

	var modal = new SF.Modal('.js-init--btnModal-11', {
			src : '/ru/modal/default.php',
		}
	);
	var modal = new SF.Modal('.js-init--btnModal-12', {
			src : '/ru/modal/default.php',
			close: {
				active: true,
				modifier:'sf-close transition text-3',
			}
		}
	);
	var modal = new SF.Modal('.js-init--btnModal-13', {
			src : '/ru/modal/default.php',
			close: {
				active: true,
				modifier: 'sf-close transition sf-close-right-top text-3 theme-dark',
			}
		}
	);

HTML

По умолчанию Больше Больше и снаружи 
<div class="inline-flex">
	<a href="javascript:void(0)" class="cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-right-0 border-0" sf-modal sf-src="/ru/modal/default.php">
		По умолчанию
	</a>
	<a href="javascript:void(0)" class="cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-0 border-0" sf-modal sf-src="/ru/modal/default.php" sf-close="sf-close transition text-3">
		Больше
	</a>
	<a href="javascript:void(0)" class="cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex radius-left-0 border-0" sf-modal sf-src="/ru/modal/default.php" sf-close="sf-close transition sf-close-right-top text-3 theme-dark">
		Больше и снаружи
	</a>
</div>

Фукнция свернуть

JavaScript

По умолчанию 

	var modal = new SF.Modal('.js-init--btnModal-hide', {
			src : '/ru/modal/default.php',
			hide : {
				active:true,
			}
		}
	);

HTML

По умолчанию 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-hide sf-src='/ru/modal/default.php'>
	По умолчанию
</a>

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

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

JavaScript

Первое окно 

	var modal = new SF.Modal('.js-init--btnModal-14', {
			src : '/ru/modal/position.php',
		}
	);

HTML

Первое окно 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/position.php'>
	Первое окно
</a>

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

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

JavaScript

По умолчанию 

	var modal = new SF.Modal('.js-init--btnModal-15', {
			src : '/ru/modal/default.php',
			iframe: true,
		}
	);

HTML

По умолчанию 
<a href='javascript:void(0)' sf-modal sf-src='/ru/modal/default.php' sf-iframe='' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex'>
	По умолчанию
</a>

Предварительная загрузка контента

Модальному окну не нужно время на загрузку контента

JavaScript

Скрыто JS Свернуто JS 

	var modal = new SF.Modal('.js-init--btnModal-16', {
			src : '/ru/modal/default.php',
			autoload:'hide',
		}
	);
	var modal_1 = new SF.Modal('.js-init--btnModal-17', {
			src 		: '/ru/modal/default.php',
			autoload	: 'collapsed',
			name		: 'Предварительная загрузка контента',
		}
	);

HTML

Скрыто Свернуто 
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-autoload sf-src='/ru/modal/default.php'>
	Скрыто
</a>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-autoload='collapsed' sf-name='Предварительная загрузка контента' sf-src='/ru/modal/default.php'>
	Свернуто
</a>

Принудительный кеш данных

Окно не удалятеся из документа после закрытия

JavaScript

Открыть окно 

	var modal = new SF.Modal('.js-init--btnModal-18', {
			src : '/ru/modal/default.php',
			unclose: true
		}
	);

HTML

Открыть окно 
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/default.php' sf-unclose>
	Открыть окно
</a>

Всплывающая подсказка

Модальное окно в виде всплывающей подсказки

JavaScript

Авто Сверху Слева Снизу Справа 

	var modal = new SF.Modal('.js-init--tooltip-auto', {
			src 	: '/ru/modal/default.php',
			tooltip	: {
				active: true,
				position: 'auto',
			}
		}
	);
	var tooltipTop = new SF.Modal('.js-init--tooltip-top', {
			src 	: '/ru/modal/default.php',
			tooltip	: {
				active: true,
				position: 'top',
			},
			width	: '400px',
			height	: '300px',
		}
	);
	var tooltipRight = new SF.Modal('.js-init--tooltip-right', {
			src 	: '/ru/modal/default.php',
			tooltip	: {
				active: true,
				position: 'right',
			},
			width	: '400px',
			height	: '300px',
		}
	);
	var tooltipBottom = new SF.Modal('.js-init--tooltip-bottom', {
			src 	: '/ru/modal/default.php',
			tooltip	: {
				active: true,
				position: 'bottom',
			},
			width	: '400px',
			height	: '300px',
		}
	);
	var tooltipLeft = new SF.Modal('.js-init--tooltip-left', {
			src 	: '/ru/modal/default.php',
			tooltip	: {
				active: true,
				position : 'left',
			},
			width	: '400px',
			height	: '300px',
		}
	);

HTML

Авто Сверху Справа Снизу Слева 
<a href='javascript:void(0)' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex m-right-1' sf-modal sf-src='/ru/modal/default.php' sf-tooltip>
	Авто
</a>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex m-right-1' sf-modal sf-src='/ru/modal/default.php' sf-tooltip='top' sf-width='400px' sf-height='300px'>
	Сверху
</a>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex m-right-1' sf-modal sf-src='/ru/modal/default.php' sf-tooltip='right' sf-width='400px' sf-height='300px'>
	Справа
</a>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex m-right-1' sf-modal sf-src='/ru/modal/default.php' sf-tooltip='bottom' sf-width='400px' sf-height='300px'>
	Снизу
</a>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='/ru/modal/default.php' sf-tooltip='left' sf-width='400px' sf-height='300px'>
	Слева
</a>

Загрузка элемента из текущего документа

JavaScript

Открыть окно 

	var modal = new SF.Modal(
		'.js-init--btnModal-20', {
			src 	: '#modal-js-13',
			mode	: 'inline',
			beforeCreateWindow : function(modal) {
			}
		}
	);

HTML

Открыть окно 
<div style='display:none' id='modal-htm-left-1/33'>Окно текущего документа HTML</div>
<a href='javascript:void(0);' class='cursor-pointer p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 border-2 border-error bg-error transition color-on-surface-inverse hover:color-on-surface underline-none hover:bg-surface-0 radius-1/3 text-1 string-none inline-flex' sf-modal sf-src='#modal-htm-left-1/33' sf-mode='inline'>
	Открыть окно
</a>

Галерея

JavaScript

HTML

PDF PDF 
<div class='layout-col-3 gap-1'>
	<a class='shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' href='https://source.unsplash.com/lSXpV8bDeMA/1536x2304'>
		<img class='w-full lazyload' src='https://source.unsplash.com/lSXpV8bDeMA/416x623'>
	</a>
	<a class='shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' href='https://source.unsplash.com/ty4X72BSsXY/1279x853'>
		<img class='w-full lazyload' src='https://source.unsplash.com/ty4X72BSsXY/416x278'>
	</a>
	<a class='shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' href='https://www.youtube.com/embed/AdHf6jF2xis'>
		<img class='w-full lazyload' src='https://i.ytimg.com/vi/AdHf6jF2xis/hqdefault.jpg'>
	</a>
	<a class='block m-bottom-1 flex flex-col items-cross-center p-4 fill-error shadow-4 color-on-surface underline-none hover:bg-surface-3 hover:color-on-surface weight-6' sf-gallery='gallery-1' sf-unclose sf-mode='image' sf-name='PDF Документ' href='/ru/modal/Документ PDF.pdf'>
		<svg class='w-max-c5' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M88 304H80V256H88C101.3 256 112 266.7 112 280C112 293.3 101.3 304 88 304zM192 256H200C208.8 256 216 263.2 216 272V336C216 344.8 208.8 352 200 352H192V256zM224 0V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64C0 28.65 28.65 0 64 0H224zM64 224C55.16 224 48 231.2 48 240V368C48 376.8 55.16 384 64 384C72.84 384 80 376.8 80 368V336H88C118.9 336 144 310.9 144 280C144 249.1 118.9 224 88 224H64zM160 368C160 376.8 167.2 384 176 384H200C226.5 384 248 362.5 248 336V272C248 245.5 226.5 224 200 224H176C167.2 224 160 231.2 160 240V368zM288 224C279.2 224 272 231.2 272 240V368C272 376.8 279.2 384 288 384C296.8 384 304 376.8 304 368V320H336C344.8 320 352 312.8 352 304C352 295.2 344.8 288 336 288H304V256H336C344.8 256 352 248.8 352 240C352 231.2 344.8 224 336 224H288zM256 0L384 128H256V0z'/></svg>
		<span class='mt-3'>PDF</span>
	</a>
	<a class='shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' href='https://source.unsplash.com/z55CR_d0ayg/1279x853'>
		<img class='w-full lazyload' src='https://source.unsplash.com/z55CR_d0ayg/416x278'>
	</a>
	<a class='shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' sf-name='Локальное видео' href='/ru/modal/animal.mp4'>
		<video playsinline webkit-playsinline class='w-full lazyload' src='/ru/modal/animal.mp4'></video>
	</a>
	<a class=' shadow-4 block m-bottom-1' sf-gallery='gallery-1' sf-unclose sf-mode='image' sf-name='Aerial photo of person using paddleboard' href='https://source.unsplash.com/KgCbvOWYuU0/1279x870'>
		<img class='w-full lazyload' src='https://source.unsplash.com/KgCbvOWYuU0/416x283'>
	</a>
	<a class=' shadow-4 block' sf-gallery='gallery-1' sf-unclose sf-mode='image' href='https://source.unsplash.com/O7qK1vQY3p0/1519x2279'>
		<img class='w-full lazyload' src='https://source.unsplash.com/O7qK1vQY3p0/416x623'>
	</a>
	<a class='aspect-2x3 mt-4 block flex flex-col items-cross-center p-4 fill-error shadow-4 color-on-surface underline-none hover:bg-surface-3 hover:color-on-surface weight-6' sf-gallery='gallery-1' sf-unclose sf-mode='image' sf-name='PDF Документ' href='/ru/modal/Документ PDF.pdf'>
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M88 304H80V256H88C101.3 256 112 266.7 112 280C112 293.3 101.3 304 88 304zM192 256H200C208.8 256 216 263.2 216 272V336C216 344.8 208.8 352 200 352H192V256zM224 0V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64C0 28.65 28.65 0 64 0H224zM64 224C55.16 224 48 231.2 48 240V368C48 376.8 55.16 384 64 384C72.84 384 80 376.8 80 368V336H88C118.9 336 144 310.9 144 280C144 249.1 118.9 224 88 224H64zM160 368C160 376.8 167.2 384 176 384H200C226.5 384 248 362.5 248 336V272C248 245.5 226.5 224 200 224H176C167.2 224 160 231.2 160 240V368zM288 224C279.2 224 272 231.2 272 240V368C272 376.8 279.2 384 288 384C296.8 384 304 376.8 304 368V320H336C344.8 320 352 312.8 352 304C352 295.2 344.8 288 336 288H304V256H336C344.8 256 352 248.8 352 240C352 231.2 344.8 224 336 224H288zM256 0L384 128H256V0z'/></svg>
		<span class='mt-3'>PDF</span>
	</a>
</div>

События

Глобальные события

Вашему вниманию предоставлен глобальный обработчик события на все модальные окна. Все события содержат объект модального она внутри обработчика этого события.

Событие SFModalBeforeCreateWindow

Событие SFModalBeforeCreateWindow срабатывает перед созданием окна

SF.receive('SFModalBeforeCreateWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalBeforeContentUpload

Событие SFModalBeforeContentUpload срабатывает перед загрузкой контента

SF.receive('SFModalBeforeContentUpload', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalAfterContentUpload

Событие SFModalAfterContentUpload срабатывает после загрузки контента

SF.receive('SFModalAfterContentUpload', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalBeforeOpenWindow

Событие SFModalBeforeOpenWindow срабатывает перед открытием

SF.receive('SFModalBeforeOpenWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalAfterOpenWindow

Событие SFModalAfterOpenWindow срабатывает после открытия

SF.receive('SFModalAfterOpenWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalBeforeHideWindow

Событие SFModalBeforeHideWindow срабатывает перед тем как свернуть

SF.receive('SFModalBeforeHideWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalBeforeShowWindow

Событие SFModalBeforeShowWindow срабатывает перед тем как развернуть

SF.receive('SFModalBeforeShowWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Событие SFModalBeforeCloseWindow

Событие SFModalBeforeCloseWindow срабатывает перед закрытием

SF.receive('SFModalBeforeCloseWindow', window, function(e) {
    console.log(e.modal); // Объект модального окна
});

Локальные события

Также есть локальные события для каждого отдельно взятого модального окна. Здесь тоже что и в глобальных событиях объект модального окна содержится внутри обработчика событий. Локальные события можно устанавливать только для JavaScript вызова.

Открыть окно

Адаптивность

Для установки адаптивности компонентов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью