Используется для создания модального окна.

Обзор блока

Модификаторы блока

Модификатор	Допустимые значения	Способы использования	Описание
visible	`true`	`JS`	Видимость модального окна.
autoclosable	`true`	`BEMJSON`	Автоматическое скрытие модального окна.
theme	`'islands'`	`BEMJSON`	Стилевое оформление.

Специализированные поля блока

Поле	Тип	Описание
zIndexGroupLevel	`Number`	Уровень слоя модального окна.

Описание блока

Модификаторы блока

Модификатор `visible`

Допустимое значение: true.

Способы использования: JS.

Выставляется при открытии модального окна.

Отвечает за видимость модального окна на странице.

Модификатор `autoclosable`

Допустимое значение: true.

Способ использования: BEMJSON.

Скрывает блок по клику вне зоны модального окна или по нажатию кнопки Escape.

{
    block : 'modal',
    mods : { theme : 'islands', autoclosable : true },
    content : 'Содержимое модального окна'
}

Модификатор `theme`

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

{
    block : 'modal',
    mods : { theme : 'islands' },
    content : 'Содержимое модального окна'
}

Специализированные поля блока

Поле `zIndexGroupLevel`

Тип: Number.

Определяет уровень слоя для каждого всплывающего окна.

Использует блок z-index-group.

{
    block : 'modal',
    mods : { theme : 'islands' },
    content : 'Содержимое модального окна',
    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>
    <div class="page__conditional-comment">
        <link rel="stylesheet" href="10-modal.css">
    </div>
    <div class="page__conditional-comment">
        <link rel="stylesheet" href="10-modal.ie.css">
    </div>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page page_theme_islands ua i-bem" data-bem='{"ua":{}}'>
    <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>
    <div class="page__conditional-comment">
        <link rel="stylesheet" href="10-modal.css">
    </div>
    <div class="page__conditional-comment">
        <link rel="stylesheet" href="10-modal.ie.css">
    </div>
    <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
</head>

<body class="page page_theme_islands ua i-bem" data-bem='{"ua":{}}'>
    <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'
        }
    }
]

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор `visible`

Модификатор `autoclosable`

Модификатор `theme`

Специализированные поля блока

Поле `zIndexGroupLevel`

Block modal

Instance methods:

Отправить отзыв

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

modal

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор visible

Модификатор autoclosable

Модификатор theme

Специализированные поля блока

Поле zIndexGroupLevel

Block modal

Instance methods:

Модификатор `visible`

Модификатор `autoclosable`

Модификатор `theme`

Поле `zIndexGroupLevel`