@lavezzi1

// _has-close/modal_has-close.js

modules.define('modal', function(provide, Modal) {

provide(Modal.decl({ modName: 'has-close', modVal: true }, {}, {
    live: function() {
        this.liveBindTo('close', 'click', function() {
            this.delMod('visible');
        });
    }
}
));

});

// _has-close/modal_has-close.deps.js

({
    shouldDeps: { elem: 'close' }
})

// _has-close/modal_has-close.bemhtml.js

block('modal').mod('has-close', true).elem('content').content()(function() {
    return [
        { elem: 'close' },
        applyNext()
    ];
});

close/modalclose.css

.modal__close {
    width: 14px;
    height: 14px;

    position: absolute;
    top: 15px;
    right: 15px;

    cursor: pointer;

    background: url(modal__close.svg) no-repeat;
}

close/modalclose.svg

<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M14 .7l-.7-.7L7 6.3.7 0 0 .7 6.3 7 0 13.3l.7.7L7 7.7l6.3 6.3.7-.7L7.7 7z"/></svg>

Если есть необходимость вызывать динамическое обновление контента для формы с крестиком, потребуется еще переопределить метод setContent, чтобы крестик не удалялся.

@tadatuta Спасибо. Правда не завелось. Модификатор has-close не вещается, иконка в контент тоже не попадает...

@lavezzi1 https://github.com/appwilio/ap-components/tree/master/common.blocks/modal/_has-close

@lavezzi1 Что подразумевается под «не вешается»? has-close нужно явно задать в BEMJSON и не забыть добавить его в deps.js

@tadatuta после явного указания в BEMJSON 'has-close' : true заработало. В депс добавил, как вы писали выше. Правда, вот такая картина получается:

@tadatuta Еще вопрос образовался, у меня есть компонент notification, который работает по тому же принципу что и модально окное, единственное что нужно - чтобы окно было зафиксировано. Как добавить паралельно к боди свойство overflow: hidden, пока так сделал $('body').css('overflow' , 'hidden'); но выглядит это не правильно как то в контексте i-bem js.

По скриншоту похоже на то, что в шаблоне вместо

block('modal').mod('has-close', true).elem('content').content()(function() {

написано

block('modal').mod('has-close', true).content()(function() {

Как добавить паралельно к боди свойство overflow: hidden

this.findBlockOutside('page').setMod('fixed');

Но если я правильно понимаю задачу, то notification вполне может быть «синглтоном» — существовать в единственном экземпляре на странице и переиспользоваться с разным контентом. Тогда можно просто заранее смиксовать его с page и overflow: hidden прописать для самого notification. А второй частью разбитого по DOM-дереву блока notification будет элемент, содержащий modal.