Minimal Responsive Modal Popup Plugin With jQuery - popup.js

jquery.popup.js is a jQuery popup plugin used to a responsive, animated, mobile-friendly modal windows using content from within the page.

How to use it:

1. Link to the jQuery popup.js plugin's CSS file.

<link rel="stylesheet" href="css/jquery.popup.css"></link>

2. Link to jQuery JavaScript library and the jQuery popup.js plugin's JavaScript file jquery.popup.js.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.popup.js"></script>

3. Create an element for the background overlay.

<div class="p_body js__p_body js__fadeout"></div>

4. Create the modal content as follows:

<div class="popup js__popup js__slide_top">
  <div class="popup__header">
    Modal Title
    <a href="#" class="p_close js__p_close" title="Закрыть">
      <span></span><span></span>
    </a>
  </div>
  <div class="p_content">
    Modal Content
  </div>
  <div class="popup__footer">
    <button class="js__p_close">Close</button>
  </div>
</div>

5. Attach the plugin to the trigger element and done.

<button class="js__popup">Open Pop-Up</button>

$(function () {
  $('.js__popup').popup();
});

6. Enable/disable the background overlay.

$(function () {
  $('.js__popup').popup({
    background: true
  });
});

6. Decide whether to close the modal popup by pressing the ESC key.

$(function () {
  $('.js__popup').popup({
    escClose: true
  });
});

7. Decide whether to center the modal popup.

$(function () {
  $('.js__popup').popup({
    center: true
  });
});

8. Set the position from which the modal window slides into the web page.

$(function () {
  $('.js__popup').popup({
    appearance: 'top' // ('left' | 'right' | 'bottom')
  });
});

---

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