EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

DocumentationJSDocExamplesSource

popup

Use this block for creating some blocks that are displayed above all other elements on a page.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
target 'anchor', 'position' BEMJSON The target point of the popup.
visible true JS Displaying of the popup.
autoclosable true BEMJSON Autoclosing of the popup.
theme 'islands' BEMJSON A custom design.

Custom fields of the block

Field Type Description
directions Array Popup position (in priority order) depending on the target point. Use only for popups with the target modifier.
mainOffset Number Popup offset (in pixels) along the main direction. Use only for popups with the target modifier.
secondaryOffset Number Popup offset (in pixels) along the secondary direction. Use only for popups with the target modifier.
viewportOffset Number The minimum popup offset (in pixels) from a viewport border. Use only for popups with the target modifier.
zIndexGroupLevel Number The level of the popup layer based on the z-index-group block.

Block description

Use the popup block to control the state, behavior and appearance of the popups that are always displayed above all other elements on a page.

Modifiers of the block

target modifier

Acceptable values: 'anchor', 'position'.

Use case: BEMJSON.

Use to set the target point of the popup.

Anchor (target modifier with anchor value)

Use to set a block or an elements as the target point of the popup.

The popup block supports a nested structure of multiple simultaneous popups. It means that it is possible to open a child popup within a parent one. When the parent popup closes, it hides all its childs popups.

Use the setAnchor method for correct work of the block.

Position coordinates (target modifier with position value)

The modifier allows to set the position coordinates as the target point of the popup.

Use the setPosition method for correct work of the block.

visible modifier

Acceptable value: true.

Use cases: JS.

The modifier is set automatically when the popup is displayed.

autoclosable modifier

Acceptable value: true.

Use case: BEMJSON.

The modifier with the true value allows to hide the popup automatically by clicking outside the popup area or pressing Escape button.

{
    block : 'popup',
    mods : { theme : 'islands', autoclosable : true },
    content : 'Click outside the popup area to close it'
}

theme modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

{
    block : 'popup',
    mods : { theme : 'islands' },
    content : 'Content of the popup'
}

Custom fields of the block

directions field

Type: Array.

Specifies the popup position (in the priority order) depending on the target point. Use only for popups with the target modifier.

The popup position is set automatically based on the acceptable directions list and the target point position. The acceptable positions have main and secondary parameters: for example, for the bottom-left direction the main parameter is bottom, and the secondary one is left.

By default the following admissible directions are available:

  • bottom-left
  • bottom-center
  • bottom-right
  • top-left
  • top-center
  • top-right
  • right-top
  • right-center
  • right-bottom
  • left-top
  • left-center
  • left-bottom

To set the popup position, an array of possible directions must be declared in BEMJSON. The most suitable direction will be selected automatically depending on the target point position on a page.

For example, to open the popup at the top of the parent block use the top-left, top-center and top-right values:

{
    block : 'popup',
    mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
    directions : ['top-left', 'top-center', 'top-right'],
    content : 'Content of the popup'
}

An example of the right-center position:

{
    block : 'popup',
    mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Content of the popup'
}

mainOffset field

Type: Number.

Specifies the popup offset (in pixels) along the main direction.

Use only for popups with the target modifier.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Content of the popup',
    mainOffset : 100
}

secondaryOffset field

Type: Number.

Specifies the popup offset (in pixels) along the secondary direction.

Use only for popups with the target modifier.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Content of the popup',
    secondaryOffset : 100
}

viewportOffset field

Type: Number.

Specifies the minimum popup offset (in pixels) from a viewport border.

Use only for popups with the target modifier.

{
    block : 'popup',
    mods : { theme: 'islands', target : 'anchor' },
    directions : ['right-center'],
    content : 'Content of the popup',
    viewportOffset : 100
}

zIndexGroupLevel field

Type: Number.

Specifies the level of the popup layer based on the z-index-group block.

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