Feature-rich jQuery Dialog Popup Plugin - addDialog
File Size: | 30.2 KB |
---|---|
Views Total: | 1007 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.