Skip to content

Latest commit

 

History

History
222 lines (149 loc) · 6.6 KB

popup.en.md

File metadata and controls

222 lines (149 loc) · 6.6 KB
Raw

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.