Messages as Bootstrap Modal

Hello everybody,

how can i set the messages to an boostrap modal?

Something like this message:

 $this->flash->success('The email was successfully confirmed. Now you must change your password');

Can i load a custom volt template in Controller?

Rgds Stefan

edited 25d ago

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 %}
edited 22d ago

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).



18.6k

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'
]);