EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

DocumentationJSDocExamplesSource

popup

Используется для создания блоков, открывающихся поверх остальных слоев страницы.

Обзор блока

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

Модификатор Допустимые значения Способы использования Описание
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 используется для создания всплывающих окон поверх остальных слоев страницы. Позволяет изменять их состояние, поведение и внешний вид.

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

Модификатор target

Допустимые значения: 'anchor', 'position'.

Способ использования: BEMJSON.

Модификатор target определяет точку открытия всплывающего окна.

Якорь (модификатор target в значении anchor)

Позволяет использовать в качестве точки открытия всплывающего окна блок или элемент.

Поддерживается многоуровневая вложенность всплывающих окон (из каждого открытого блока popup может быть вызван другой). Одновременно с закрытием всплывающего окна закрываются все его дочерние окна.

Необходимо использовать метод setAnchor.

Координаты (модификатор target в значении position)

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

Необходимо использовать метод setPosition.

Модификатор visible

Допустимое значение: true.

Способы использования: JS.

Выставляется при открытии всплывающего окна.

Отвечает за видимость всплывающего окна на странице.

Модификатор autoclosable

Допустимое значение: true.

Способ использования: BEMJSON.

При наличии модификатора autoclosable блок скрывается по клику вне зоны всплывающего окна или по нажатию кнопки Escape.

{
    block : 'popup',
    mods : { theme : 'islands', autoclosable : true },
    content : 'Содержимое всплывающего окна'
}

Модификатор theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

{
    block : 'popup',
    mods : { theme : 'islands' },
    content : 'Содержимое всплывающего окна'
}

Специализированные поля блока

Поле directions

Тип: 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 : 'Содержимое всплывающего окна'
}

Поле mainOffset

Тип: Number.

Определяет смещение в пикселях всплывающего окна относительно основного направления.

Используется только с модификатором target.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Содержимое всплывающего окна',
    mainOffset : 100
}

Поле secondaryOffset

Тип: Number.

Определяет смещение в пикселях всплывающего окна относительно второстепенного направления.

Используется только с модификатором target.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Содержимое всплывающего окна',
    secondaryOffset : 100
}

Поле viewportOffset

Тип: Number.

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

Используется только с модификатором target.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Содержимое всплывающего окна',
    viewportOffset : 100
}

Поле zIndexGroupLevel

Тип: Number.

Определяет уровень слоя для каждого всплывающего окна.

Использует блок z-index-group.

popup
Instance methods:
setContent
popup_target
Instance methods:
setContent
redraw
calcPossibleDrawingParams
_calcTargetDimensions
popup_target_anchor
Instance methods:
setAnchor
_calcTargetDimensions
_calcDrawingCss
_onWinScrollAndResize
popup_target_position
Instance methods:
setPosition
_calcTargetDimensions

Block popup

Instance methods:

setContent(content):popup
description
Sets content
parameters
content
String, jQuery

popup_target

Instance methods:

setContent()override
redraw():popup
description
Redraws popup
calcPossibleDrawingParams():Array
description
Returns possible directions to draw with max available width and height.
_calcTargetDimensions():Objectprotectedabstract

popup_target_anchor

Instance methods:

setAnchor(anchor):popup
description
Sets target
parameters
anchor
jQuery, bemDom
DOM elem or anchor bemDom block
_calcTargetDimensions()override
_calcDrawingCss()override
_onWinScrollAndResize()override

popup_target_position

Instance methods:

setPosition(left, top):popup
description
Sets position
parameters
left
Number
x-coordinate
top
Number
y-coordinate
_calcTargetDimensions()override
Open in a new window
Open in a new window
Open in a new window
Open in a new window