Animated Popup Box Plugin with jQuery and Animate.css - gDialog

gDialog is a jQuery/Zepto plugin used to create animated, nice dialog boxes to replace the default JavaScript popup boxes (alert, prompt, confirm), with fancy entrance and exit animations powered by Animate.css.

How to use it:

1. Load the required jQuery library and Animate.css in the html document.

<link rel="stylesheet" href="/path/to/animate.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Load the gDialog plugin's files from src folder.

<link rel="stylesheet" href="src/jquery.gDialog.css">
<script src="src/jquery.gDialog.js"></script>

3. Create an alert dialog box with title and custom animations.

$.gDialog.alert("Alert message here.", {
  title: "Alert Dialog Box",
  animateIn: "bounceIn",
  animateOut: "flipOutY"
});

4. Create a prompt dialog box with required field and custom animations.

$.gDialog.prompt("Your Username", "jQueryScript", {
  title: "Prompt Dialog Box",
  required: true,
  animateIn : "rollIn",
  animateOut: "zoomOutDown"
});

5. Create a confiramtion dialog box with no animations.

$.gDialog.confirm("Are You Sure?", {
  title: "Confirm Dialog Box",
});

6. All configuration options with default values.

// dialog title
title: false,

// animation types
// reference to https://daneden.github.io/animate.css/
animateIn : false,
animateOut : false,

// callback functions
onSubmit : false,
onCancel : false,

// required field for prompt dialog
required: false,

---

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