Confirm modal options (default settings)
Modal.confirm({
title: 'Notification', // modal title
message: '', // modal message
autoOpen: true, // show modal when declared
closeOnEscape: true, // close when escape key pressed
closeOnBlur: true, // close when overlay is clicked
animated: true, // animate modal
buttonClass: '', // confirm button class
buttonLbl: 'OK', // confirm button label
cancelLbl: 'Cancel' // cancel button label
onConfirm: function() {}, // callback if the user confirms
onCancel: function() {}, // callback if the modal is closed without the
onClose: function() {}, // callback on modal close, called allways after confirm or cancel
});
Alert modal options (default settings)
Modal.alert({
title: 'Notification', // modal title
message: '', // modal message
autoOpen: true, // show modal when declared
closeOnEscape: true, // close when escape key pressed
closeOnBlur: true, // close when overlay is clicked
animated: true, // animate modal
buttonLbl: 'OK', // alert button label
onClose: function() {}, // callback on modal close
});
Helper Methods
.open() // opens the modal
.close() // closes the modal
Modal.confirm({
title: 'Change something',
message: 'Are you sure you want to change?'
});
Modal.alert('Hello!');
Confirm Modal with callbacks
Modal.confirm({
title: 'Confirm callbacks',
message: 'Will you eat your cake?',
onConfirm: function() {
alert('I will!');
},
onCancel: function() {
alert('Nope!');
},
onClose: function() {
alert('Finally close is called!');
}
});
The callbacks can be set inline as well (same result as above)
Modal.confirm({
title: 'Confirm callbacks',
message: 'Will you eat your cake?'
}, function() {
alert('I will!');
}, function() {
alert('Nope!');
}, function() {
alert('Finally close is called!');
});
Confirm button preset colors (red, green)
Modal.confirm({
title: 'Confirm button color',
message: 'Is the cake sweet?',
buttonClass: 'green',
buttonLbl: 'Yes'
});
Easily add custom interfaces to the Modal object for a faster development
Modal.deleteImage = function(imageName) {
arguments[0] = {
title: 'Delete Image',
message: 'Are you sure you want to delete <strong>' + imageName + '</strong>?',
buttonClass: 'red',
buttonLbl: 'Delete file'
};
return Modal.confirm.apply(this, arguments);
};
The effort to call the modal is reduced significantly as seen bellow:
Modal.deleteImage('iPhone5S.jpg', function() {
alert('Delete image!');
});