gDialog - An elegant jQuery replacement for browser alerts

jopen 9年前

$.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,

项目地址： https://github.com/ogilvieira/gDialog