Simple Elegant Dialog Box Plugin For jQuery - vdialog

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.