Используется для создания блоков, открывающихся поверх остальных слоев страницы.
Модификатор | Допустимые значения | Способы использования | Описание |
---|---|---|---|
target | 'anchor' , 'position' |
BEMJSON |
Точка открытия всплывающего окна. |
visible | true |
JS |
Видимость всплывающего окна. |
autoclosable | true |
BEMJSON |
Автоматическое скрытие всплывающего окна. |
theme | 'islands' |
BEMJSON |
Стилевое оформление. |
Поле | Тип | Описание |
---|---|---|
directions | Array |
Расположение (в порядке приоритета) относительно точки открытия. Используется только для всплывающих окон с модификатором target. |
mainOffset | Number |
Смещение в пикселях всплывающего окна относительно основного направления. Используется только с модификатором target. |
secondaryOffset | Number |
Смещение в пикселях всплывающего окна относительно второстепенного направления. Используется только с модификатором target. |
viewportOffset | Number |
Минимально допустимое смещение в пикселях всплывающего окна от края окна браузера. Используется только с модификатором target. |
zIndexGroupLevel | Number |
Уровень слоя для открывающихся всплывающих окон. Использует блок z-index-group. |
Блок popup
используется для создания всплывающих окон поверх остальных слоев страницы. Позволяет изменять их состояние, поведение и внешний вид.
Допустимые значения: 'anchor'
, 'position'
.
Способ использования: BEMJSON
.
Модификатор target
определяет точку открытия всплывающего окна.
Позволяет использовать в качестве точки открытия всплывающего окна блок или элемент.
Поддерживается многоуровневая вложенность всплывающих окон (из каждого открытого блока popup
может быть вызван другой). Одновременно с закрытием всплывающего окна закрываются все его дочерние окна.
Необходимо использовать метод setAnchor.
Позволяет задавать точку открытия всплывающего окна координатами.
Необходимо использовать метод setPosition.
Допустимое значение: true
.
Способы использования: JS
.
Выставляется при открытии всплывающего окна.
Отвечает за видимость всплывающего окна на странице.
Допустимое значение: true
.
Способ использования: BEMJSON
.
При наличии модификатора autoclosable
блок скрывается по клику вне зоны всплывающего окна или по нажатию кнопки Escape
.
{
block : 'popup',
mods : { theme : 'islands', autoclosable : true },
content : 'Содержимое всплывающего окна'
}
Допустимое значение: 'islands'
.
Способ использования: BEMJSON
.
Отвечает за стилевое оформление блока.
{
block : 'popup',
mods : { theme : 'islands' },
content : 'Содержимое всплывающего окна'
}
Тип: Array
.
Определяет расположение всплывающего окна относительно точки открытия.
Используется только для всплывающих окон с модификатором target.
Расположение блока определяется автоматически, исходя из массива допустимых направлений (в порядке приоритета) и положения точки открытия на странице. У всех допустимых направлений есть основной и второстепенный параметры. Например, для направления bottom-left
параметр bottom
является основным, а left
— второстепенным.
По умолчанию используется следующий массив допустимых направлений:
- bottom-left
- bottom-center
- bottom-right
- top-left
- top-center
- top-right
- right-top
- right-center
- right-bottom
- left-top
- left-center
- left-bottom
Для управления расположением всплывающего окна необходимо указать массив направлений открытия. При этом из значений массива будет выбрано наиболее подходящее, исходя из положения точки открытия на странице.
Например, если требуется, чтобы всплывающее окно раскрывалось над точкой открытия:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['top-left', 'top-center', 'top-right'],
content : 'Содержимое всплывающего окна'
}
Если необходимо разместить всплывающее окно справа по центру:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна'
}
Тип: Number
.
Определяет смещение в пикселях всплывающего окна относительно основного направления.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
mainOffset : 100
}
Тип: Number
.
Определяет смещение в пикселях всплывающего окна относительно второстепенного направления.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
secondaryOffset : 100
}
Тип: Number
.
Определяет минимально допустимое смещение в пикселях всплывающего окна от края окна браузера.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
viewportOffset : 100
}
Тип: Number
.
Определяет уровень слоя для каждого всплывающего окна.
Использует блок z-index-group.