simple-popup-js

Simple Animated Popup Box Plugin | popup.js

by

Simple Popup is just a simple ECMA6 popup category. popup.js is a customizable popup prompt / confirm/alert jQuery plugin that uses the well-known animate.css library for animations to open/close cool popups.

custom popup jquery, animated modal popup using jquery, jquery popup plugin, open modal popup using jquery on button click, jquery modal popup example

How to make use of it:

1. Load the wanted jQuery and animate.css libraries within the doc.

<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 within the doc.

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

4. Customize the title of the popup field.

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

5. Set the open/close animations. See animate.css library for the complete animation list.

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

6. Trigger features 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
  },
});

7. Customize the label text.

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

Options

OptionTypeDefaultDescription
titlestring“”Add title on header popup
callbackOpenfunctionnullCallback trigger when popup is opened
callbackClosefunctionnullCallback trigger when popup is closed
animationOpenstring“fadeIn”Opening animation type based on Animate.css classes name (ie: fadeInDown, zoomIn…)
animationClosestring“fadeOut”Closing animation type based on Animate.css classes name
closeLabelstring“close”Close button label used for alert popup type
yesLabelstring“yes”Confirm button label used for confirm popup type
noLabelstring“no”Deny button used for confirm popup type
validLabelstring“valid”Valid button used for prompt popup type

Animated Popup Box Plugin, Simple Popup Github, popup on popup jquery, jquery multiple popup boxes, open div in popup using jquery on button click

See Demo And Download

Download

Official Website(mrjeanjean): Click Here

This superior jQuery/javascript plugin is developed by mrjeanjean. For extra Advanced Usages, please go to the official website.

Leave a Comment