Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

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
}
Instance methods:
setContent

Block modal

Instance methods:

setContent(content):modal
description
Sets content
parameters
content
String, jQuery
Open in a new window
Open in a new window