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
}

modal

Instance methods:

setContent

Block modal

Instance methods:

setContent(content):modal

description

Sets content

parameters

content

String, jQuery

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>10-modal.js</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
        (function(d, n) {
            d.documentElement.className += " ua_svg_" + (d[n] && d[n]("http://www.w3.org/2000/svg", "svg").createSVGRect ? "yes" : "no");
        })(document, "createElementNS");
    </script>
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="10-modal.css">
    <!--<![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="10-modal.ie.css"><![endif]-->
</head>

<body class="page page_theme_islands">
    <div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open islands modal with content interaction</span>
        <div class="modal modal_autoclosable modal_theme_islands popup popup_autoclosable i-bem"
            data-bem='{"modal":{},"popup":{"zIndexGroupLevel":20}}' role="dialog" aria-hidden="true">
            <div class="modal__table">
                <div class="modal__cell">
                    <div class="modal__content">some information</div>
                </div>
            </div>
        </div>
    </div>
    <script src="10-modal.js"></script>
</body>

</html>

{
    block: 'page',
    title: '10-modal.js',
    head: [
        {
            elem: 'conditional-comment',
            condition: '> IE 8',
            msieOnly: false,
            content: {
                elem: 'css',
                url: '10-modal.css'
            }
        },
        {
            elem: 'conditional-comment',
            condition: '<= IE 8',
            content: {
                elem: 'css',
                url: '10-modal.ie.css'
            }
        }
    ],
    scripts: [
        {
            elem: 'js',
            url: '10-modal.js'
        }
    ],
    mods: {
        theme: 'islands'
    },
    content: {
        block: 'test',
        js: true,
        content: [
            {
                block: 'link',
                mods: {
                    pseudo: true,
                    theme: 'islands'
                },
                content: 'open islands modal with content interaction'
            },
            {
                block: 'modal',
                mods: {
                    autoclosable: true,
                    theme: 'islands'
                },
                content: 'some information'
            }
        ]
    }
}

[
    {
        block: 'page',
        mods: {
            theme: 'islands'
        }
    },
    'test',
    {
        block: 'link',
        mods: {
            pseudo: true,
            theme: 'islands'
        }
    },
    {
        block: 'modal',
        mods: {
            autoclosable: true,
            theme: 'islands'
        }
    }
]

Open in a new window

<!DOCTYPE html>
<html class="ua_js_no">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>10-modal.js</title>
    <script>
        (function(e, c) {
            e[c] = e[c].replace(/(ua_js_)no/g, "$1yes");
        })(document.documentElement, "className");
        (function(d, n) {
            d.documentElement.className += " ua_svg_" + (d[n] && d[n]("http://www.w3.org/2000/svg", "svg").createSVGRect ? "yes" : "no");
        })(document, "createElementNS");
    </script>
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="10-modal.css">
    <!--<![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="10-modal.ie.css"><![endif]-->
</head>

<body class="page page_theme_islands">
    <div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open islands modal with content interaction</span>
        <div class="modal modal_autoclosable modal_theme_islands popup popup_autoclosable i-bem"
            data-bem='{"modal":{},"popup":{"zIndexGroupLevel":20}}' role="dialog" aria-hidden="true">
            <div class="modal__table">
                <div class="modal__cell">
                    <div class="modal__content">some information</div>
                </div>
            </div>
        </div>
    </div>
    <script src="10-modal.js"></script>
</body>

</html>

{
    block: 'page',
    title: '10-modal.js',
    head: [
        {
            elem: 'conditional-comment',
            condition: '> IE 8',
            msieOnly: false,
            content: {
                elem: 'css',
                url: '10-modal.css'
            }
        },
        {
            elem: 'conditional-comment',
            condition: '<= IE 8',
            content: {
                elem: 'css',
                url: '10-modal.ie.css'
            }
        }
    ],
    scripts: [
        {
            elem: 'js',
            url: '10-modal.js'
        }
    ],
    mods: {
        theme: 'islands'
    },
    content: {
        block: 'test',
        js: true,
        content: [
            {
                block: 'link',
                mods: {
                    pseudo: true,
                    theme: 'islands'
                },
                content: 'open islands modal with content interaction'
            },
            {
                block: 'modal',
                mods: {
                    autoclosable: true,
                    theme: 'islands'
                },
                content: 'some information'
            }
        ]
    }
}

[
    {
        block: 'page',
        mods: {
            theme: 'islands'
        }
    },
    'test',
    {
        block: 'link',
        mods: {
            pseudo: true,
            theme: 'islands'
        }
    },
    {
        block: 'modal',
        mods: {
            autoclosable: true,
            theme: 'islands'
        }
    }
]

Methodology

Technology

Toolbox

Libraries

Tutorials

Overview

Modifiers of the block

Custom fields of the block

Block description

Modifiers of the block

`visible` modifier

`autoclosable` modifier

`theme` modifier

Custom fields of the block

`zIndexGroupLevel` field

Block modal

Instance methods:

Send feedback

Methodology

Technology

Toolbox

Libraries

Tutorials

modal

Overview

Modifiers of the block

Custom fields of the block

Block description

Modifiers of the block

visible modifier

autoclosable modifier

theme modifier

Custom fields of the block

zIndexGroupLevel field

Block modal

Instance methods:

`visible` modifier

`autoclosable` modifier

`theme` modifier

`zIndexGroupLevel` field