Versatile Dialog Box & Notification Popup Plugin - jquery.dialog.js
| File Size: | 22.7 KB |
|---|---|
| Views Total: | 1006 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A powerful, flexible, and customizable jQuery plugin used for displaying alert/confirm/prompt dialog boxes and info/warning/success/info notification popups on your web application.
How to use it:
1. Insert jQuery JavaScript library and the dialog plugin's files into the web page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">
</script>
<script src="jquery.dialog.js"></script>
<link rel="stylesheet" href="dialog.css">
2. Create a basic dialog box.
$.dialog({
content: ''Any HTML Content Here'
});
3. Create notification messages. Possible parameters:
- message: Notification message to display.
- timeout: Auto dismisses the notification after this timeout. Set to false to disable.
- callback: Performs a function after the notification is closed.
$.sendMsg('Notification Message', 3000, function(){
alert('close')
});
// or
$.sendSuccess('Success Message', 3000, function(){
alert('close')
});
$.sendWarning('Warning Message', 3000, function(){
alert('close')
});
$.sendError('Error Message', 3000, function(){
alert('close')
});
$.sendSuccessToTop('Sticky Success Message', 3000, function(){
alert('close')
});
$.sendWarningToTop('Sticky Warning Message', 3000, function(){
alert('close')
});
4. Create a basic confirmation dialog box.
$.sendConfirm({
title: 'Confirm Dialog',
msg: 'Are U Sure?',
desc: 'Are U Sure to delete this entry?',
button: {
confirm: 'Okey',
cancel: 'Cancel'
},
onConfirm: function() {
console.log('Confirm');
},
onCancel: function() {
console.log('Cancel');
},
onClose: function() {
console.log('Close');
}
});
5. Global settings with default values.
{
id: '',
title: 'Title',
isFixed: true,
hideHeader: false,
hideClose: false,
content: null,
callback: null,
withNoPadding: false,
withNoMinWidth: false,
bgHide: true,
escHide: true
}
6. Default options for the confirm dialog box.
{
id: 'dialogConfirmBox',
title: 'Confirm',
hideHeader: false,
hideClose: false,
withCenter: false,
withIcon: false,
autoClose: false,
timeout: 3000,
width: null,
noconfirm: false,
msg: '',
desc: '',
content: '',
button: {
confirm: 'Okey', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
cancel: 'Cancel', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}
cancelFirst: false
}
}
This awesome jQuery plugin is developed by springlong. For more Advanced Usages, please check the demo page or visit the official website.











