Есть несколько вариантов.

Можно заранее положить modal в DOM, а потом просто найти, выставить контент и показать:

modules.define('my-block', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.findBlockInside('modal')
                    .setContent('бла-бла')
                    .setMod('visible');
            }
        }
    }
}));

});

Либо можно создать его в рантайме с помощью шаблонов:

modules.define('my-block', ['i-bem__dom', 'BEMHTML'], function(provide, BEMDOM, BEMHTML) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                BEMDOM.append(this.domElem, BEMHTML.apply({
                    block: 'modal',
                    mods: { autoclosable: true, theme: 'islands' }
                }))
                    .bem('modal')
                    .setContent('бла-бла')
                    .setMod('visible');
            }
        }
    }
}));

});

И, наконец, можно сделать «синглтон»: сделать блок-обертку, которая при первом обращении создаст modal и сохранит ссылку на него, а при последующих обращениях будет работать по первому сценарию.

modules.define('info-modal', ['i-bem__dom', 'BEMHTML'], function(provide, BEMDOM, BEMHTML) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                if (this.__self.getModal()) return;

                this.__self._modal = BEMDOM.append(this.domElem, BEMHTML.apply({
                    block: 'modal',
                    mods: { autoclosable: true, theme: 'islands' }
                })).bem('modal');
            }
        }
    }
}, {
    show: function(content) {
        this.getModal()
            .setContent(content)
            .setMod('visible');

        return this;
    },
    hide: function() {
        this.getModal().delMod('visible');

        return this;
    },
    toggle: function() {
        this.getModal().toggleMod('visible');

        return this;
    },
    getModal: function() {
        return this._modal;
    }
}));

});

Дальше можно просто миксовать info-modal к любому блоку, которому нужно модальное окно и вызывать из него InfoModal.show('бла-бла').

@tadatuta Круто! Спасибо :)

@tadatuta а как такое с BH вытворить? В стабе код по BH устаревший :( не могу понять как на клиент отдать BH шаблоны

@JiLiZART На клиенте ничего не меняется, тут пример конфига со сборкой bh на клиент

@kompolom Вроде так и делаю, по итогу генерируются два файла ?.bh.js в котором есть все bh шаблоны и browser.bh.js в котором только один bh. Мне это нужно чтобы нормально можно было на клиенте сделать BH.apply({block: 'modal'})

В итоге выяснил, чтобы собрать ?.bh.bemdecl.js используя enb-bem-techs/deps-by-tech-to-bemdecl с параметром sourceTech: 'js' (параметр обязательный) нужно в ?.deps.js файле блока явно указывать tech : 'js', чего естественно в core и components блоках нет. @tadatuta это баг или фича?

фича. вы сами решаете какие шаблоны должны попадать на клиент

@Guria а если мне надо чтобы в клиентскую сборку попал modal.bh.js файл, как мне быть? Указав в ?.deps.js файле с tech: js зависимость блока от modal результата не дало.

@JiLiZART в deps нужно еще и технологию bemhtml указывать

{
    tech: 'js',
    shouldDeps: [
        {block: 'image', tech: 'bemhtml'}
    ]
}

в my-block.deps.js должно быть что-то вроде

{
    tech: 'js',
    shouldDeps: { block: 'modal', tech: 'bemhtml' } // здесь будет tech: 'bemhtml', если в конфиге было https://gist.github.com/kompolom/4cb42ec3b440a4deae74#file-make-js-L72
}

@tadatuta @kompolom спасибо, все заработало :)

@tadatuta, приветствую. Использую https://github.com/bemdesign (он на project-stub). Не совсем понял как сделать обвертку и с помощью синглтона вызывать модалку с разных элементов/блоков... на данный момент bemjson.js выглядит следующим образом

{
  elem: 'action',
  content: [
        {
    block: 'modal-basic',
    js: true,
    content: [
        {
          block : 'button',
          mods : { type: 'link', theme: 'custom', size: 'm' },
          mix : { block : 'hero', elem : 'try'},
          title : 'Попробовать бесплатно',
          text : 'Попробовать бесплатно'
        },
        {
            block : 'modal',
            mix : { block : 'modal-basic', mods : { type : 'basic' } },
            mods : { theme : 'islands', 'has-close' : true, autoclosable : true },
            content : [
              {
                контент модалки
              }
            ]
        }
    ]
    }
  ]
},

Как выглядит modal-basic/modal-basic.browser.js

modules.define('modal-basic', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                var button = this.findBlockInside('button');
                var modal = this.findBlockInside('modal');

                button.on('click', function() {
                    modal.setMod('visible', true);
                });
            }
        }
    }
}));

});

-- создаю блок copy-modal, в него кладу copy-modal.js cо следующим кодом:

modules.define('copy-modal', ['i-bem__dom', 'BEMHTML'], function(provide, BEMDOM, BEMHTML) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                if (this.__self.getModal()) return;

                this.__self._modal = BEMDOM.append(this.domElem, BEMHTML.apply({
                    block: 'modal',
                    mods: { autoclosable: true, theme: 'islands' }
                })).bem('modal');
            }
        }
    }
}, {
    show: function(content) {
        this.getModal()
            .setContent(content)
            .setMod('visible');

        return this;
    },
    hide: function() {
        this.getModal().delMod('visible');

        return this;
    },
    toggle: function() {
        this.getModal().toggleMod('visible');

        return this;
    },
    getModal: function() {
        return this._modal;
    }
}));

});

пытаюсь подмешать в bemjson.js любому элементу после модалки(кнопке)

mix : { block : 'copy-modal' },

ничего модалкой не обворачивается и соответственно по клику ничего не происходит. Я не особо силен в JS, но на jQuery реализовал бы за 5 мин, а тут встрял... Уважаемые форумчане, как правильно сослаться на нужное модальное окно и как в моем случае должен выглядеть код? есть крайняя необходимость в этом разобраться

@hiphoptime А вы для чего к модалке основной блок замиксовали? Не нужОн он там. copy-modal вообще сбоку где-то получился. Код вроде есть, но ни к чему не привязан, соответственно он не выполнится. Вам нужно перенести код в modal-basic В modal-basic сохраняйте вложенные блоки как свойство this._modal а не как переменную, иначе вы их не найдете потом. Модалку точно не найдете.

@hiphoptime

1. Ищем попап (или модалку) https://github.com/appwilio/ap-components/blob/master/common.blocks/input/_type/input_type_datepicker.js#L26
2. Делаем что хотим https://github.com/appwilio/ap-components/blob/master/common.blocks/input/_type/input_type_datepicker.js#L20