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('×')) ) ).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>