Animated Popup Box Plugin With jQuery And Animate.css - popup.js

popup.js is a customizable alert/confirm/prompt dialog popup jQuery plugin that uses the well-known animate.css library for awesome popup open/close animations.

How to use it:

1. Load the needed jQuery and animate.css libraries in the document.

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

2. Load the popup.js plugin's files in the document.

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

3. The syntax.

// Alert popup
Popup.alert("Alert Message", {
  // options here
});

// Confirm popup
Popup.confirm("Confirm Message", {
  // options here
});

// Prompt
Popup.prompt("Confirm Message", {
  // options here
});

3. Customize the title of the popup box.

Popup.alert("Alert Message", {
  title: "Popup Title"
});

4. Set the open/close animations. See animate.css library for the full animation list.

Popup.alert("Alert Message", {
  animationOpen: "animate__fadeIn"
  animationClose: "animate__fadeOut"
});

5. Trigger functions when the popup box is closed & opened.

Popup.confirm("Confirm Message", {
  callbackClose: function(event){
    if(event.confirm){
      Popup.alert("All right", {title:"Info"});
    }else{
      Popup.alert("Nevermind...", {title:"Info"});
    }
  },
  callbackOpen: function(event){
    // do something
  },
});

6. Customize the label text.

Popup.confirm("Confirm Message", {
  closeLabel: "close",
  yesLabel: "yes",
  noLabel: "no",
  validLabel: "valid"
});

---

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