Bootstrap 4 Modal Alert Dialog

Wed, 10 January 2018

jQuery.alertDialog.js
jQuery.extend({
    alertDialog: function(options) {
        if (typeof options == 'undefined') {
            options = {}
        }
        if (jQuery.type(options) === "string") {
            options = {"message": options}
        }

        var defaults = {
            'title': 'Unexpected error',
            'ok': 'OK',
            'message': 'An error occurred',
            'icon': true,
            'backdrop': true,
            'keyboard': true,
            'focus': true,
            'show': function(e){},
            'shown': function(e){},
            'hide': function(e){},
            'hidden': function(e){}
        };

        var opts = $.extend({}, defaults, options);

        if ($('#alertDialogModal').length > 0) {
            $('#alertDialogModal').off('show.bs.modal');
            $('#alertDialogModal').off('shown.bs.modal');
            $('#alertDialogModal').off('hide.bs.modal');
            $('#alertDialogModal').off('hidden.bs.modal');
            $('.adm-title').html(opts['title']);
            if (opts['icon'] === true) {
                $('.adm-title').append($('<i />').addClass('text-danger float-left material-icons').html('error'));
            }
            $('.adm-message').html(opts['message']);
            $('.adm-close-btn').attr('aria-label', opts['ok']);
            $('.adm-close').html(opts['ok']);
            $('#alertDialogModal').on('show.bs.modal', opts['show']);
            $('#alertDialogModal').on('shown.bs.modal', opts['shown']);
            $('#alertDialogModal').on('hide.bs.modal', opts['hide']);
            $('#alertDialogModal').on('hidden.bs.modal', opts['hidden']);
            $('#alertDialogModal').modal(
                {
                    backdrop: opts['backdrop'],
                    keyboard: opts['keyboard'],
                    focus: opts['focus']
                }
            );
            return;
        }
        var elem = $('<div />').addClass('modal').attr(
            {
                'id': 'alertDialogModal',
                'tabindex': '-1',
                'role': 'dialog',
                'aria-labelledby': 'alertDialogModalLabel',
                'aria-hidden': 'true'
            }
        ).html(
            $('<div />').addClass('modal-dialog').attr('role', 'document').html(
                $('<div />').addClass('modal-content').html(
                    $('<div />').addClass('modal-header bg-light').html(
                        $('<h6 />').addClass('modal-title adm-title').attr('id', 'alertDialogModalLabel').html(opts['title'])
                    ).append(
                        $('<button />').addClass('close adm-close-btn').attr(
                            {
                                "type": "button",
                                "data-dismiss": "modal",
                                "aria-label": opts['ok']
                            }
                        ).html($('<span />').attr('aria-hidden', 'true').html('&times;'))
                    )
                ).append(
                    $('<div />').addClass('modal-body').html(
                        $('<p />').addClass('adm-message').html(opts['message'])
                    )
                ).append(
                    $('<div />').addClass('modal-footer bg-light').html(
                        $('<button />').attr(
                            {
                                "type": "button",
                                "data-dismiss": "modal"
                            }
                        ).addClass('pl-4 pr-4 btn btn-primary adm-close').html(opts['ok'])
                    )
                )
            )
        );
        if (opts['icon'] === true) {
            $('.adm-title', elem).append($('<i />').addClass('text-danger float-left material-icons').html('error'));
        }
        $('body').append(elem);
        $('#alertDialogModal').modal(
            {
                "backdrop": opts['backdrop'],
                "keyboard": opts['keyboard'],
                "focus": opts['focus']
            }
        );
        $('#alertDialogModal').on('show.bs.modal', opts['show']);
        $('#alertDialogModal').on('shown.bs.modal', opts['shown']);
        $('#alertDialogModal').on('hide.bs.modal', opts['hide']);
        $('#alertDialogModal').on('hidden.bs.modal', opts['hidden']);
    }
});
usage.html
Basic:
<script>
$.alertDialog("We experienced an error");
</script>

Advanced (all default values):
<script>
$.alertDialog(
    {
        "message": 'We experienced an error', // String (default 'An error occurred') - The message to show in the modal
        "title": "Unexpected error", // String (default 'Unexpected error') - The string to show as the title
        "ok": "Close", // String (default 'OK') the word to show on the confirmation button
        "icon": true,  // Bool (default true) - Whether to show the red 'error' icon (requires Material Icons)
        "backdrop": 'static',  // Bool (default true) - Specify 'static' for a backdrop which doesn't close on click
        "focus": true,  // Bool (default true) - Puts the focus on the modal when initialized
        "keyboard": true, // Bool (default true) - Closes the modal when escape key is pressed
        "show": function(e){}, // Function - This is called immediately when the show instance method is called
        "shown": function(e){}, // Function - This is called when the modal has been made visible to the user
        "hide": function(e){}, // Function - This is called immediately when the hide instance method has been called
        "hidden": function(e){} // Function - This is called when the modal has finished being hidden from the user
    }
)
</script>

Advanced (changing all default values):
<script>
$.alertDialog(
    {
        "message": 'This is another message', // String (default 'An error occurred') - The message to show in the modal
        "title": "Different title", // String (default 'Unexpected error') - The string to show as the title
        "ok": "Okie dokie!", // String (default 'OK') the word to show on the confirmation button
        "icon": false,  // Bool (default true) - Whether to show the red 'error' icon (requires Material Icons)
        "backdrop": false,  // Bool (default true) - Specify 'static' for a backdrop which doesn't close on click
        "focus": false,  // Bool (default true) - Puts the focus on the modal when initialized
        "keyboard": false, // Bool (default true) - Closes the modal when escape key is pressed
        "show": function(e){
            console.log('show 2');
        }, // Function - This is called immediately when the show instance method is called
        "shown": function(e){
            console.log('shown 2');
        }, // Function - This is called when the modal has been made visible to the user
        "hide": function(e){
            console.log('hide 2');
        }, // Function - This is called immediately when the hide instance method has been called
        "hidden": function(e){
            console.log('hidden 2');
        } // Function - This is called when the modal has finished being hidden from the user
    }
)
</script>