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.