popup.comp.html

<ac-popup>
    <div class="popup-overlay" name="popup_overlay">
        <div class="popup" name="popup">
            <div class="header">
                <h1 name="title">{ opts.title }</h1>
                <h2 if="opts.subtitle">{ opts.subtitle }</h2>

                <div class="close" onclick="{ closePopup }"></div>
            </div>

            <div class="body">
                <yield />
            </div>
        </div>
    </div>

    <script>

    this.on('mount', () => {
        this.popup_overlay.classList.add('come-in');
    });

    closePopup() {
        this.popup_overlay.classList.add('come-out');

        $(this.popup_overlay).off('animationend');
        $(this.popup_overlay).on('animationend', () => {
            this.unmount();
        });
    }
    </script>
</ac-popup>

Using it declaratively:

<ac-popup title="Olá mundo!" subtitle="Subtitulo aqui!">
    Blablabla eu sou o corpo da <b>popup!</b>
</ac-popup>

Programatically:

const data = {
    title: 'Olá mundo!',
    subtitle: 'Subtitulo aqui!'
}

riot.mount('#id-do-componente', data);