Simple Elegant Dialog Box Plugin For jQuery - vdialog
File Size: | 122 KB |
---|---|
Views Total: | 1484 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
vdialog is a lightweight, simple-to-use jQuery plugin which lets you create clean-looking, highly customizable dialog boxes for mobile, desktop and HTML5 web applications.
Basic usage:
1. To use this plugin, make sure to load the following JS & CSS files in your html document.
<link href="vdialog.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="vdialog.js"></script>
2. The JavaScript to create a basic dialog box.
vdialog({ title: 'Title', content: 'I am a basic dialog' }).showModal();
3. The JavaScript to create a basic dialog box that auto dismiss after 3 seconds.
vdialog({ title: 'Title', content: 'I am a basic dialog', time: 3 }).showModal();
4. Display 'Ok' and 'Cancel' buttons with callbacks, great for confirmation dialog box.
vdialog({ title: 'Title', content: 'I am a confirm dialog', ok: function(){ alert('confirm'); } cancel: function(){ alert('cancel'); } }).showModal();
5. The plugin provides a fast way to create alert/confirm/success/info dialog boxes using the following methods.
// confirmation vdialog.confirm('Are You Sure', function(){ alert('Confirm'); }); // alert vdialog.alert('Alert dialog'); // success vdialog.success('Success dialog'); // error vdialog.error('Error dialog');
6. Show / hide the dialog box manually.
var a = vdialog({ title: 'Title', content: 'I am a dialog' }); // show the dialog a.show(); // hide the dialog a.hide();
7. Events.
vdialog({ title: 'Title', content: 'I am a dialog', ok: function(){ this.emit('myEvent'); } }).on('myEvent', function(){ alert('This is a custom event: myEvent'); }); vdialog({ title: 'Title', content: 'I am a dialog', ok: true, cancel: true, modal: true }).on('close', function(){ alert('You closed the dialog'); });
8. All default options.
id: '', // dialog title type: '', // alert, success, error, confirm title: 'Dialog Title', content: '', init: null, ok: null, okValue: 'Okey', cancel: null, cancelValue: 'Cancel', modal: false, // modal mode fixed: false, close: null, esc: true, // esc key to close time: false, // for auto close width: 'auto', height: 'auto', left: 'auto', top: 'auto', padding: 'auto'
This awesome jQuery plugin is developed by yewumian. For more Advanced Usages, please check the demo page or visit the official website.