Use this block for creating some blocks that are displayed above all other elements on a page.
Modifier | Acceptable values | Use cases | Description |
---|---|---|---|
target | 'anchor' , 'position' |
BEMJSON |
The target point of the popup. |
visible | true |
JS |
Displaying of the popup. |
autoclosable | true |
BEMJSON |
Autoclosing of the popup. |
theme | 'islands' |
BEMJSON |
A custom design. |
Field | Type | Description |
---|---|---|
directions | Array |
Popup position (in priority order) depending on the target point. Use only for popups with the target modifier. |
mainOffset | Number |
Popup offset (in pixels) along the main direction. Use only for popups with the target modifier. |
secondaryOffset | Number |
Popup offset (in pixels) along the secondary direction. Use only for popups with the target modifier. |
viewportOffset | Number |
The minimum popup offset (in pixels) from a viewport border. Use only for popups with the target modifier. |
zIndexGroupLevel | Number |
The level of the popup layer based on the z-index-group block. |
Use the popup
block to control the state, behavior and appearance of the popups that are always displayed above all other elements on a page.
target
modifierAcceptable values: 'anchor'
, 'position'
.
Use case: BEMJSON
.
Use to set the target point of the popup.
target
modifier with anchor
value)Use to set a block or an elements as the target point of the popup.
The popup
block supports a nested structure of multiple simultaneous popups. It means that it is possible to open a child popup within a parent one. When the parent popup closes, it hides all its childs popups.
Use the setAnchor method for correct work of the block.
target
modifier with position
value)The modifier allows to set the position coordinates as the target point of the popup.
Use the setPosition method for correct work of the block.
visible
modifierAcceptable value: true
.
Use cases: JS
.
The modifier is set automatically when the popup is displayed.
autoclosable
modifierAcceptable value: true
.
Use case: BEMJSON
.
The modifier with the true
value allows to hide the popup automatically by clicking outside the popup area or pressing Escape
button.
{
block : 'popup',
mods : { theme : 'islands', autoclosable : true },
content : 'Click outside the popup area to close it'
}
theme
modifierAcceptable value: 'islands'
.
Use case: BEMJSON
.
The modifier gives the block a custom design.
{
block : 'popup',
mods : { theme : 'islands' },
content : 'Content of the popup'
}
directions
fieldType: Array
.
Specifies the popup position (in the priority order) depending on the target point. Use only for popups with the target modifier.
The popup position is set automatically based on the acceptable directions list and the target point position. The acceptable positions have main and secondary parameters: for example, for the bottom-left
direction the main parameter is bottom
, and the secondary one is left
.
By default the following admissible directions are available:
To set the popup position, an array of possible directions must be declared in BEMJSON. The most suitable direction will be selected automatically depending on the target point position on a page.
For example, to open the popup
at the top of the parent block use the top-left
, top-center
and top-right
values:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['top-left', 'top-center', 'top-right'],
content : 'Content of the popup'
}
An example of the right-center
position:
{
block : 'popup',
mods : { autoclosable : true, theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Content of the popup'
}
mainOffset
fieldType: Number
.
Specifies the popup offset (in pixels) along the main direction.
Use only for popups with the target modifier.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Content of the popup',
mainOffset : 100
}
secondaryOffset
fieldType: Number
.
Specifies the popup offset (in pixels) along the secondary direction.
Use only for popups with the target modifier.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Content of the popup',
secondaryOffset : 100
}
viewportOffset
fieldType: Number
.
Specifies the minimum popup offset (in pixels) from a viewport border.
Use only for popups with the target modifier.
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['right-center'],
content : 'Content of the popup',
viewportOffset : 100
}
zIndexGroupLevel
fieldType: Number
.
Specifies the level of the popup layer based on the z-index-group block.
<!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>
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="10-popup.css">
<!--<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="10-popup.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 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>
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="20-popup.css">
<!--<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="20-popup.ie.css"><![endif]-->
</head>
<body class="page page_theme_islands">
<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>
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="10-popup.css">
<!--<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="10-popup.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 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>
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="20-popup.css">
<!--<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="20-popup.ie.css"><![endif]-->
</head>
<body class="page page_theme_islands">
<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'
]