How to make use of it:

1. Load the mandatory jQuery library and animate.css from a CDN.

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

2. Insert your modal content along with a close button.

<div id="myModal" class="myModal">
  <!-- Modal Content Here -->
  <h3>Modal Title</h3>
  <p>Modal Body</p>
  <!-- Custom Close Button -->
  <b class="myModal-close js-popup-close">x</b>
</div>

3. Download and include the popup.js script after jQuery.

<script src="jquery.popup.min.js"></script>

4. Call the function to the modal popup on the web page load.

$('#myModal').popup();

5. Apply CSS styles to the modal popup.

.myModal {
  max-width: 600px;
  padding: 1em;
  background: #eee;
  display: none;
  position: relative;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

6. Style the close button no matter what you want.

.item-close {
  cursor: pointer;
  right: 5px;
  top: 5px;
  position: absolute;
  background: #222;
  color: #fff;
  border-radius: 100%;
  font-size: 14px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  width: 24px;
}

7. Apply fancy animations to the modal utilizing the Animate.css classes.

$('#myModal').popup({
  classAnimateShow: 'slideInUp',
  classAnimateHide: 'fadeOut'
});

8. Specify the animation speed.

$('#myModal').popup({
  time: 1000
});

9. Customize the looks of the modal popup.

$('#myModal').popup({
  background: "#000",
  position: "absolute",
  opacity: .5,
  zIndex: 123456788,
});

10. Execute a callback function after the modal is closed.

$('#myModal').popup({
  onPopupClose: function(e) {
    // do something
  }
});

11. Execute a callback function on init.

$('#myModal').popup({
  onPopupInit: function(e) {
    // do something
  }
});

12. Close the modal popup manually.

$('#myModal').popup('close');

See Demo And Download