Fancy Inline Modal With jQuery And Animate.css - popup.js

popup.js is a super tiny jQuery plugin to create a static inline modal popup with fancy CSS3 transitions based on Animate.css library.

How to use it:

1. Load the necessary 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 together with a close button into the document.

<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 launch the modal popup on 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 whatever you like.

.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 using Animate.css classes. Default: none.

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

8. Specify the animation speed. Default: 400.

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

9. Customize the appearance 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');

Changelog:

2021-05-07

• Bugfix

---

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