Модальные окна
В 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
Вы можете из окон открывать вложенные окна. Количество вложенности не ограниченно:
<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 shadow-hover-6 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>