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>