Messages as Bootstrap Modal

Here is my implementation, it's not the best, but you will get the idea and can come up with something better :)

Javascript:

function createSystemMessageModal($options)
{
    var title = $options.title || ' ';
    var size = $options.size ||  'modal-sm';
    var zIndex = 9999 + $('.modal').length + 1;
    var $html = '<div class="modal fade placeholder-modal" id="placeholderModal-'+ zIndex +'" tabindex="-1" style="z-index: '+ zIndex +';" role="dialog" aria-labelledby="placeholderModalLabel" aria-hidden="true">';
            $html+= '<div class="modal-dialog '+ size +'">';
                $html+= '<div class="modal-content">';
                    $html+= '<div class="modal-header">';
                        $html+= '<button type="button" class="close" data-dismiss="modal" aria-label="' + translations.close + '"><span aria-hidden="true">&times;</span></button>';
                        $html+= '<h4 class="modal-title" id="placeholderModalLabel">' + title + '</h4>';
                    $html+= '</div>';
                    if ($options.content) {
                        $html+= '<div class="modal-body">';
                            $html+= $options.content;
                        $html+= '</div>';
                    }
                    $html+= '<div class="modal-footer">';
                        $html+= '<button type="button" class="btn btn-outline modal-footer-close" data-dismiss="modal">' + translations.close + '</button>';
                        if ($options.additionalButtons) {
                            $html+= $options.additionalButtons;
                        }
                    $html+= '</div>';
                $html+= '</div>';
            $html+= '</div>';
        $html+= '</div>';

    $('body').append($($html));

    $('#placeholderModal-'+ zIndex).modal({
        show: true
    });

    // Focus first button (Fake delay due to Chrome bug...)
    setTimeout(function(){
        $('#placeholderModal-'+ zIndex +' .modal-footer .btn:first-child').trigger('focus');
    }, 500);
}

Volt:

{% if flash.has('success') OR flash.has('warning') OR flash.has('notice') OR flash.has('error') %}
<script type="text/javascript"> 
    $(document).ready(function() {
        createSystemMessageModal({
            title: '&nbsp;',
            content: '{{ flash.output() }}',
            size: 'modal-sm'
        });
    });
</script>
{% endif %}

Try this in your main template:

<div id='flash-session-div'>{{ flashSession.output() }}</div>

Note that the snipped above uses the Flash Session object, not the Flash one (which is direct).

Hello :-)

i did it with jQuery:

var alertNotice = $(document).find(".hidden.alert.alert-notice");

if(alertNotice){

    var alertTriggerNotice = $(".btn.btn-info.btn-lg.alert.alert-notice").trigger('click');

    if(alertTriggerNotice){
        toastr["info"]("I was launched via jQuery!");
    }
}

services

return new Flash([
    'notice' => 'hidden alert alert-notice'
]);