modal.en.md

modal

Use this block for creating a modal window.

Overview

Modifiers of the block

Modifier	Acceptable values	Use cases	Description
visible	true	JS	Displaying of the modal window.
autoclosable	true	BEMJSON	Autoclosing of the modal window.
theme	'islands'	BEMJSON	A custom design.

Custom fields of the block

Field	Type	Description
zIndexGroupLevel	Number	The level of the modal window layer based on the z-index-group block.

Block description

Use the modal block to control the state, behavior and appearance of the modal windows.

Modifiers of the block

visible modifier

Acceptable value: true.

Use cases: JS.

The modifier is set automatically when the modal window is displayed.

autoclosable modifier

Acceptable value: true.

Use case: BEMJSON.

This modifier with the true value allows to hide the modal window automatically by clicking outside the modal window area or pressing Escape button.

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

theme modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

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

Custom fields of the block

zIndexGroupLevel field

Type: Number.

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

{
    block : 'modal',
    mods : { theme : 'islands' },
    content : 'Content of the modal window',
    zIndexGroupLevel : 3
}