Используется для создания блоков, открывающихся поверх остальных слоев страницы.
Модификатор | Допустимые значения | Способы использования | Описание |
---|---|---|---|
target | 'anchor' , 'position' |
BEMJSON |
Точка открытия всплывающего окна. |
visible | true |
JS |
Видимость всплывающего окна. |
autoclosable | true |
BEMJSON |
Автоматическое скрытие всплывающего окна. |
theme | 'islands' |
BEMJSON |
Стилевое оформление. |
Поле | Тип | Описание |
---|---|---|
directions | Array |
Расположение (в порядке приоритета) относительно точки открытия. Используется только для всплывающих окон с модификатором target. |
mainOffset | Number |
Смещение в пикселях всплывающего окна относительно основного направления. Используется только с модификатором target. |
secondaryOffset | Number |
Смещение в пикселях всплывающего окна относительно второстепенного направления. Используется только с модификатором target. |
viewportOffset | Number |
Минимально допустимое смещение в пикселях всплывающего окна от края окна браузера. Используется только с модификатором target. |
zIndexGroupLevel | Number |
Уровень слоя для открывающихся всплывающих окон. Использует блок z-index-group. |
Блок popup
используется для создания всплывающих окон поверх остальных слоев страницы. Позволяет изменять их состояние, поведение и внешний вид.
target
Допустимые значения: 'anchor'
, 'position'
.
Способ использования: BEMJSON
.
Модификатор target
определяет точку открытия всплывающего окна.
target
в значении anchor
)Позволяет использовать в качестве точки открытия всплывающего окна блок или элемент.
Поддерживается многоуровневая вложенность всплывающих окон (из каждого открытого блока popup
может быть вызван другой). Одновременно с закрытием всплывающего окна закрываются все его дочерние окна.
Необходимо использовать метод setAnchor.
target
в значении position
)Позволяет задавать точку открытия всплывающего окна координатами.
Необходимо использовать метод setPosition.
visible
Допустимое значение: true
.
Способы использования: JS
.
Выставляется при открытии всплывающего окна.
Отвечает за видимость всплывающего окна на странице.
autoclosable
Допустимое значение: true
.
Способ использования: BEMJSON
.
При наличии модификатора autoclosable
блок скрывается по клику вне зоны всплывающего окна или по нажатию кнопки Escape
.
{
block : 'popup',
mods : { theme : 'islands', autoclosable : true },
content : 'Содержимое всплывающего окна'
}
theme
Допустимое значение: 'islands'
.
Способ использования: BEMJSON
.
Отвечает за стилевое оформление блока.
{
block : 'popup',
mods : { theme : 'islands' },
content : 'Содержимое всплывающего окна'
}
directions
Тип: Array
.
Определяет расположение всплывающего окна относительно точки открытия.
Используется только для всплывающих окон с модификатором target.
Расположение блока определяется автоматически, исходя из массива допустимых направлений (в порядке приоритета) и положения точки открытия на странице. У всех допустимых направлений есть основной и второстепенный параметры. Например, для направления bottom-left
параметр bottom
является основным, а left
— второстепенным.
По умолчанию используется следующий массив допустимых направлений:
Для управления расположением всплывающего окна необходимо указать массив направлений открытия. При этом из значений массива будет выбрано наиболее подходящее, исходя из положения точки открытия на странице.
Например, если требуется, чтобы всплывающее окно раскрывалось над точкой открытия:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['top-left', 'top-center', 'top-right'],
content : 'Содержимое всплывающего окна'
}
Если необходимо разместить всплывающее окно справа по центру:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна'
}
mainOffset
Тип: Number
.
Определяет смещение в пикселях всплывающего окна относительно основного направления.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
mainOffset : 100
}
secondaryOffset
Тип: Number
.
Определяет смещение в пикселях всплывающего окна относительно второстепенного направления.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
secondaryOffset : 100
}
viewportOffset
Тип: Number
.
Определяет минимально допустимое смещение в пикселях всплывающего окна от края окна браузера.
Используется только с модификатором target.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Содержимое всплывающего окна',
viewportOffset : 100
}
zIndexGroupLevel
Тип: Number
.
Определяет уровень слоя для каждого всплывающего окна.
Использует блок z-index-group.
<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>10-popup</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-popup.css">
</div>
<div class="page__conditional-comment">
<link rel="stylesheet" href="10-popup.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 popup with content interaction</span>
<div class="popup popup_theme_islands popup_target_anchor popup_autoclosable i-bem"
data-bem='{"popup":{}}' aria-hidden="true">popup content</div>
</div>
<script src="10-popup.js"></script>
</body>
</html>
{
block: 'page',
title: '10-popup',
head: [
{
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: {
elem: 'css',
url: '10-popup.css'
}
},
{
elem: 'conditional-comment',
condition: '<= IE 8',
content: {
elem: 'css',
url: '10-popup.ie.css'
}
}
],
scripts: [
{
elem: 'js',
url: '10-popup.js'
}
],
mods: {
theme: 'islands'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true,
theme: 'islands'
},
content: 'open islands popup with content interaction'
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor',
autoclosable: true
},
content: 'popup content'
}
]
}
}
[
{
block: 'page',
mods: {
theme: 'islands'
}
},
'test',
{
block: 'link',
mods: {
pseudo: true,
theme: 'islands'
}
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor',
autoclosable: true
}
}
]
<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>20-popup</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="20-popup.css">
</div>
<div class="page__conditional-comment">
<link rel="stylesheet" href="20-popup.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 z-index-group z-index-group_level_9 i-bem" data-bem='{"test":{}}' style="position : fixed; left : 0; top : 0; background-color : #eee; padding : 10px;"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">owner in fixed</span>
<div class="popup popup_theme_islands popup_target_anchor test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">popup on fixed owner <br />also i'm not autoclosable</div>
</div>
<table class="directions">
<tr class="directions__row">
<td class="directions__cell"></td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-left</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-left"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-right</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-right"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell"></td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-top</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-top"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center directions__cell_border_yes" colspan="3" rowspan="3">
<div class="test i-bem" data-bem='{"test":{"position":[50,50]}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">popup at 50x50</span>
<div class="popup popup_target_position popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-top</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-top"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-bottom</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-bottom"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-bottom</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-bottom"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell"></td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-left</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-left"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-right</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-right"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell"></td>
</tr>
</table>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">nested popups</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">just popup <button>native button, should not hide popup</button>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open nested popup</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}'
aria-hidden="true">the nested popup</div>
</div>
</div>
</div><br>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">destructing popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">destruct parent of my anchor</span></div>
</div><br>
<div class="summon-test i-bem" data-bem='{"summon-test":{}}'>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{"zIndexGroupLevel":1}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span></div>
</div>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{"zIndexGroupLevel":2}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span></div>
</div><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span>
<div class="popup popup_target_anchor popup_theme_islands summon-test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">summoned popup</div>
</div>
<div class="scrollable">
<div class="test i-bem" data-bem='{"test":{}}'>scroll to center<span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">in scrollable</div>
</div>
</div>
<script src="20-popup.js"></script>
</body>
</html>
{
block: 'page',
title: '20-popup',
head: [
{
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: {
elem: 'css',
url: '20-popup.css'
}
},
{
elem: 'conditional-comment',
condition: '<= IE 8',
content: {
elem: 'css',
url: '20-popup.ie.css'
}
}
],
scripts: [
{
elem: 'js',
url: '20-popup.js'
}
],
mods: {
theme: 'islands'
},
content: [
{
block: 'test',
mix: {
block: 'z-index-group',
mods: {
level: 9
}
},
attrs: {
style: 'position : fixed; left : 0; top : 0; background-color : #eee; padding : 10px;'
},
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'owner in fixed'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
theme: 'islands',
target: 'anchor'
},
content: 'popup on fixed owner <br />also i\'m not autoclosable'
}
]
},
{
block: 'directions',
content: [
{
elem: 'row',
content: [
{
elem: 'cell'
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-left'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-left'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-right'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-right'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell'
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-top'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-top'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center',
border: 'yes'
},
attrs: {
colspan: 3,
rowspan: 3
},
content: {
block: 'test',
js: {
position: [
50,
50
]
},
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'popup at 50x50'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'position',
theme: 'islands'
},
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-top'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-top'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-center'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-bottom'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-bottom'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-bottom'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-bottom'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell'
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-left'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-left'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-right'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-right'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell'
}
]
}
]
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'nested popups'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
content: [
'just popup ',
{
tag: 'button',
content: 'native button, should not hide popup'
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open nested popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
content: 'the nested popup'
}
]
}
]
}
]
},
{
tag: 'br'
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'destructing popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: {
block: 'link',
mix: {
block: 'test',
elem: 'destructor'
},
mods: {
pseudo: true
},
content: 'destruct parent of my anchor'
}
}
]
},
{
tag: 'br'
},
{
block: 'summon-test',
js: true,
content: [
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
' ',
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
zIndexGroupLevel: 1,
content: {
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
}
}
]
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
' ',
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
zIndexGroupLevel: 2,
content: {
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
}
}
]
},
{
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
},
{
block: 'popup',
mix: {
block: 'summon-test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: 'summoned popup'
}
]
},
{
block: 'scrollable',
content: {
block: 'test',
js: true,
content: [
'scroll to center',
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: 'in scrollable'
}
]
}
}
]
}
[
{
block: 'page',
mods: {
theme: 'islands'
}
},
{
block: 'test',
elems: [
'popup',
{
elem: 'cell',
mods: {
align: [
'right',
'center',
'left'
],
border: 'yes'
}
},
'row',
'destructor'
]
},
{
block: 'z-index-group',
mods: {
level: 9
}
},
{
block: 'link',
mods: {
pseudo: true
}
},
{
block: 'popup',
mods: {
theme: 'islands',
target: [
'anchor',
'position'
],
autoclosable: true
}
},
{
block: 'directions',
elems: [
'row',
{
elem: 'cell',
mods: {
align: 'left'
}
}
]
},
{
block: 'summon-test',
elems: [
'summoner',
'popup'
]
},
'scrollable'
]
<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>10-popup</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-popup.css">
</div>
<div class="page__conditional-comment">
<link rel="stylesheet" href="10-popup.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 popup with content interaction</span>
<div class="popup popup_theme_islands popup_target_anchor popup_autoclosable i-bem"
data-bem='{"popup":{}}' aria-hidden="true">popup content</div>
</div>
<script src="10-popup.js"></script>
</body>
</html>
{
block: 'page',
title: '10-popup',
head: [
{
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: {
elem: 'css',
url: '10-popup.css'
}
},
{
elem: 'conditional-comment',
condition: '<= IE 8',
content: {
elem: 'css',
url: '10-popup.ie.css'
}
}
],
scripts: [
{
elem: 'js',
url: '10-popup.js'
}
],
mods: {
theme: 'islands'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true,
theme: 'islands'
},
content: 'open islands popup with content interaction'
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor',
autoclosable: true
},
content: 'popup content'
}
]
}
}
[
{
block: 'page',
mods: {
theme: 'islands'
}
},
'test',
{
block: 'link',
mods: {
pseudo: true,
theme: 'islands'
}
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor',
autoclosable: true
}
}
]
<!DOCTYPE html>
<html class="ua_js_no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>20-popup</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="20-popup.css">
</div>
<div class="page__conditional-comment">
<link rel="stylesheet" href="20-popup.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 z-index-group z-index-group_level_9 i-bem" data-bem='{"test":{}}' style="position : fixed; left : 0; top : 0; background-color : #eee; padding : 10px;"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">owner in fixed</span>
<div class="popup popup_theme_islands popup_target_anchor test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">popup on fixed owner <br />also i'm not autoclosable</div>
</div>
<table class="directions">
<tr class="directions__row">
<td class="directions__cell"></td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-left</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-left"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">top-right</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["top-right"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell"></td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-top</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-top"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center directions__cell_border_yes" colspan="3" rowspan="3">
<div class="test i-bem" data-bem='{"test":{"position":[50,50]}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">popup at 50x50</span>
<div class="popup popup_target_position popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-top</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-top"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">left-bottom</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["left-bottom"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">right-bottom</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["right-bottom"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
</tr>
<tr class="directions__row">
<td class="directions__cell"></td>
<td class="directions__cell directions__cell_align_left">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-left</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-left"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_center">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-center</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-center"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell directions__cell_align_right">
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">bottom-right</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{"directions":["bottom-right"]}}'
aria-hidden="true">the popup</div>
</div>
</td>
<td class="directions__cell"></td>
</tr>
</table>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">nested popups</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">just popup <button>native button, should not hide popup</button>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open nested popup</span>
<div class="popup popup_target_anchor popup_autoclosable popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}'
aria-hidden="true">the nested popup</div>
</div>
</div>
</div><br>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">destructing popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">destruct parent of my anchor</span></div>
</div><br>
<div class="summon-test i-bem" data-bem='{"summon-test":{}}'>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{"zIndexGroupLevel":1}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span></div>
</div>
<div class="test i-bem" data-bem='{"test":{}}'><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{"zIndexGroupLevel":2}}' aria-hidden="true"><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span></div>
</div><span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">summon popup to me</span>
<div class="popup popup_target_anchor popup_theme_islands summon-test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">summoned popup</div>
</div>
<div class="scrollable">
<div class="test i-bem" data-bem='{"test":{}}'>scroll to center<span class="link link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">open popup</span>
<div class="popup popup_target_anchor popup_theme_islands test__popup i-bem" data-bem='{"popup":{}}' aria-hidden="true">in scrollable</div>
</div>
</div>
<script src="20-popup.js"></script>
</body>
</html>
{
block: 'page',
title: '20-popup',
head: [
{
elem: 'conditional-comment',
condition: '> IE 8',
msieOnly: false,
content: {
elem: 'css',
url: '20-popup.css'
}
},
{
elem: 'conditional-comment',
condition: '<= IE 8',
content: {
elem: 'css',
url: '20-popup.ie.css'
}
}
],
scripts: [
{
elem: 'js',
url: '20-popup.js'
}
],
mods: {
theme: 'islands'
},
content: [
{
block: 'test',
mix: {
block: 'z-index-group',
mods: {
level: 9
}
},
attrs: {
style: 'position : fixed; left : 0; top : 0; background-color : #eee; padding : 10px;'
},
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'owner in fixed'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
theme: 'islands',
target: 'anchor'
},
content: 'popup on fixed owner <br />also i\'m not autoclosable'
}
]
},
{
block: 'directions',
content: [
{
elem: 'row',
content: [
{
elem: 'cell'
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-left'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-left'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'top-right'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'top-right'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell'
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-top'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-top'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center',
border: 'yes'
},
attrs: {
colspan: 3,
rowspan: 3
},
content: {
block: 'test',
js: {
position: [
50,
50
]
},
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'popup at 50x50'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'position',
theme: 'islands'
},
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-top'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-top'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-center'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'left-bottom'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'left-bottom'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'right-bottom'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'right-bottom'
],
content: 'the popup'
}
]
}
}
]
},
{
elem: 'row',
content: [
{
elem: 'cell'
},
{
elem: 'cell',
elemMods: {
align: 'left'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-left'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-left'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'center'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-center'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-center'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell',
elemMods: {
align: 'right'
},
content: {
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'bottom-right'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
directions: [
'bottom-right'
],
content: 'the popup'
}
]
}
},
{
elem: 'cell'
}
]
}
]
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'nested popups'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
content: [
'just popup ',
{
tag: 'button',
content: 'native button, should not hide popup'
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open nested popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
autoclosable: true,
theme: 'islands'
},
content: 'the nested popup'
}
]
}
]
}
]
},
{
tag: 'br'
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'destructing popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: {
block: 'link',
mix: {
block: 'test',
elem: 'destructor'
},
mods: {
pseudo: true
},
content: 'destruct parent of my anchor'
}
}
]
},
{
tag: 'br'
},
{
block: 'summon-test',
js: true,
content: [
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
' ',
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
zIndexGroupLevel: 1,
content: {
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
}
}
]
},
{
block: 'test',
js: true,
content: [
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
' ',
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
zIndexGroupLevel: 2,
content: {
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
}
}
]
},
{
block: 'link',
mix: {
block: 'summon-test',
elem: 'summoner'
},
mods: {
pseudo: true
},
content: 'summon popup to me'
},
{
block: 'popup',
mix: {
block: 'summon-test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: 'summoned popup'
}
]
},
{
block: 'scrollable',
content: {
block: 'test',
js: true,
content: [
'scroll to center',
{
block: 'link',
mods: {
pseudo: true
},
content: 'open popup'
},
{
block: 'popup',
mix: {
block: 'test',
elem: 'popup'
},
mods: {
target: 'anchor',
theme: 'islands'
},
content: 'in scrollable'
}
]
}
}
]
}
[
{
block: 'page',
mods: {
theme: 'islands'
}
},
{
block: 'test',
elems: [
'popup',
{
elem: 'cell',
mods: {
align: [
'right',
'center',
'left'
],
border: 'yes'
}
},
'row',
'destructor'
]
},
{
block: 'z-index-group',
mods: {
level: 9
}
},
{
block: 'link',
mods: {
pseudo: true
}
},
{
block: 'popup',
mods: {
theme: 'islands',
target: [
'anchor',
'position'
],
autoclosable: true
}
},
{
block: 'directions',
elems: [
'row',
{
elem: 'cell',
mods: {
align: 'left'
}
}
]
},
{
block: 'summon-test',
elems: [
'summoner',
'popup'
]
},
'scrollable'
]