Всем привет! Наткнулся с небольшой проблемой, хотелось бы узнать как кто ее решает Для начала bemjson:
{
block: "page"
...
content : {
block : 'wrapper',
js : true,
content : [
{
block : 'popup',
mods : { theme: 'islands', target : 'anchor' },
directions : ['bottom-center'],
content : 'Содержимое всплывающего окна'
},
{
elem : 'show',
content: {
block : 'button',
mods: { theme : 'islands', size: 'm' },
text: 'Показать'
}
},
{
elem : 'hide',
content : {
block : 'button',
name: 'hide',
mods: { theme : 'islands', size: 'm' },
text: 'Скрыть'
}
}
]
}
}
и wrapper.js
modules.define('wrapper', ['i-bem__dom'], function(provide, BEMDOM){
provide(BEMDOM.decl(this.name,
{
onSetMod : {
js : {
inited : function () {
this.findBlockInside('popup').setAnchor(this);
this.findBlockInside('show', 'button')
.on(
'click',
this._onShow,
this
);
this.findBlockInside('hide', 'button')
.on(
'click',
this._onHide,
this
);
}
}
},
_onShow : function () {
this.findBlockInside('popup').setMod('visible', true);
},
_onHide : function () {
this.findBlockInside('popup').setMod('visible', false);
}
}
));
});
Примитивный пример ради демонстрации самой проблемы. Так вот при клике на кнопку показать всплывающее окно показывается, а вот скрыть его уже невозможно, если быть точнее, то после
this.findBlockInside('popup').setMod('visible', true);
поиск popup'a дает null и соответсвенно setMod сыпит. Все происходит потому, что узел с окошком меняет свое местоположение в дереве и из любой вложенности "перепрыгивает" вконец узла body. Конечно можно написать что-то типа этого
modules.define('wrapper', ['i-bem__dom'], function(provide, BEMDOM){
var popup;
provide(BEMDOM.decl(this.name,
...
inited : function () {
popup = this.findBlockInside('popup').setAnchor(this);
...
А если у нас, например, страница с кучей полей и валидацией на них, на которые нужно навешать всплывающие подсказки при ошибочном вводе, то мне такой способ кажется не самым лучшим. Так вот собственно вопрос, почему именно так реализовано и как правильнее решить сложившуюся ситуацию?
Стоит создать метод
getPopup
, который будет выглядеть примерно так:А перенос попапа в самый конец необходим, чтобы:
overflow: hidden;