yorgos-dimitriadis
4/5/2017 - 12:05 PM

JavaScript confirm with magnific popup

JavaScript confirm with magnific popup

var confirmDialog = function(message, headline, cb) {
    var dialog = '<div class="dialog confirm mfp-with-anim">';
    if (headline) {
        dialog += '<h2>' + headline + '</h2>';
    }
    dialog += '<div class="content"><p>' + message + '</p></div>';
    dialog += '<div class="actions">';
    dialog += '<button type="button" class="btn btn-default btn-cancel">Abbrechen</button> ';
    dialog += '<button type="button" class="btn btn-primary btn-submit">OK</button>';
    dialog += '</div>';
    dialog += '</div>';
 
    $.magnificPopup.open({
        modal: true,
        items: {
            src: dialog,
            type: 'inline'
        },
        callbacks: {
            open: function() {
                var $content = $(this.content);
 
                $content.on('click', '.btn-submit', function() {
                    if (typeof cb == 'function') {
                        cb();
                    }
                    $.magnificPopup.close();
                    $(document).off('keydown', keydownHandler);
                });
 
                $content.on('click', '.btn-cancel', function() {
                    $.magnificPopup.close();
                    $(document).off('keydown', keydownHandler);
                });
 
                var keydownHandler = function (e) {
                    if (e.keyCode == 13) {
                        $content.find('.btn-submit').click();
                        return false;
                    } else if (e.keyCode == 27) {
                        $content.find('.btn-cancel').click();
                        return false;
                    }
                };
                $(document).on('keydown', keydownHandler);
            }
        }
    });
};