Customizable Confirm Dialog Box For jQuery - Jdialog

Jdialog is a simple yet fully customizable jQuery plugin that creates an animated, programmatic dialog box with confirm / cancel buttons to replace the native JavaScript confirm() method.

How to use it:

1. Place jQuery library and the jQuery Jdialog plugin at the bottom of the web page.

<script src="jquery.min.js"></script>
<script src="jQueryDialog.js"></script>

2. Place the jQueryDialog.css in the header for default dialog styles.

<link rel="stylesheet" href="jQueryDialog.css">

3. Create a basic confirm dialog with custom confirm / cancel callback functions.

$.confirm({
  content: 'This is a confirm dialog',
  cancel: function () {
    // do something
  },
  confirm: function () {
    // do something
  }
});

4. Full plugin options to customize your confirm dialog boxes.

// custom template
template: '<div class="jdialog"><div class="jdialog-box"><div class="title"></div><div class="content"></div><div class="buttons"></div><div class="jquery-clear"></div></div></div>',

// dialog title
title: 'Hello',

// dialog conent
content: 'Are you sure to continue?',

// confirm text
confirmButton: 'Okay',

// cancel text
cancelButton: 'Cancel',

// css class for confirm button
confirmButtonClass: 'btn-default',

// css class for cancel button
cancelButtonClass: 'btn-default',

// add your own themes in the css
theme: 'white',

// animation type.
// scale or rotate
animation: 'scale',

// animation speed
animationSpeed: 400,

// callback functions
confirm: function () {
},
cancel: function () {
}

---

This awesome jQuery plugin is developed by Taisetsuz. For more Advanced Usages, please check the demo page or visit the official website.