Feature-rich jQuery Dialog Popup Plugin - addDialog

addDialog is a tiny yet highly configurable jQuery plugin for creating beautiful alert / confirm / prompt / error / modal dialog boxes to replace the default JavaScript popup boxes.

Features:

• 4 optional themes.
• Draggable.
• Lots of configuration options.
• Callback functions.
• Easy to use.

How to use it:

1. Load a theme CSS of your choice in the document's head section.

• addDialog.skin-marterial.light-static.css
• addDialog.skin-material.dark-static.css
• addDialog.skin-simple.light-static.css
• addDialog.skin-simple.dark-static.css

<link href="skins/THEME.css" rel="stylesheet">

2. Load jQuery library and the jQuery addDialog plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="addDialog.js"></script>

3. Create a basic dialog box.

$add.Dialog("I am a basic dialog box.");

4. Create an alert dialog box.

$add.AlertDialog("I am a basic alert dialog box.");

5. Create an error dialog box.

$add.Dialog.error("I am a basic error dialog box.");

6. Create a confirmation dialog box.

$add.Dialog.confirm("I am a basic confirm dialog box.");

7. Create a prompt dialog box.

$add.Dialog.prompt("I am a basic prompt dialog box.");

8. Create a custom dialog box with the following options.

$add.Dialog("A Custom Dialog", {

  // shows an overlay
  overlay: true,

  // draggable?
  draggable: true,

  // When true this dialog opens all other dialogs will be closed and no other dialogs may be opened until this dialog is closed.
  exclusive: false,

  // width / height
  width: 350,
  height: 250,

  // dialog title
  title: " ",

  // text for confirm button
  truetext: "OK",

  // text for cancel button
  falsetext: "Cancel",

  // shows close button
  closebtn: true,

  // additional CSS class
  class: "",

  // should pressing the enter key trigger the true button
  enterkey: true,

  // should pressing the "ESC" key trigger the false button
  esckey: true,

  // close the dialog by clicking on the overlay
  overlayclose: false,

  // callbacks
  onopen: function(){},
  onclose: function(){},
  ontrue: function(){},
  onfalse: function(){}
  
});

Change log:

2016-12-23

• v3.2.1

 

---

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