$.gDialog()

jQuery, Zepto, Responsive and UMD

An elegant replacement dialog boxes with fancy entrance and exit animations powered by Animate.css.

view demo

How to use it:

• 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>

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

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

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

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

• 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"
  });

• Create a confiramtion dialog box with no animations.

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

• 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,