Show Inline Content In A Responsive Modal - jQuery Popup.js

A simple, customizable, responsive jQuery popup plugin which can be used to overlay your inline content on the top of the current page.

How to use it:

1. Add references to jQuery library and the popup plugin's file.

<link rel="stylesheet" href="src/jquery.popup.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.popup.js"></script>

2. Create the content to be displayed in the modal popup.

<div id="my-popup" class="popup-item">
  <p>Popup Content Here</p>
</div>

3. Initialize the plugin to activate the modal popup.

$(function(){

  $('.popup-item').popup();

});

4. To open the modal popup on page load just set the active to true OR use the data-ui-active attribute as follows:

$('.popup-item').popup({
  active: true
});

<div id="my-popup" class="popup-item" data-ui-active="true">
  <p>Popup Content Here</p>
</div>

5. Customize title of the modal popup.

$('.popup-item').popup({
  title: 'Default title'
});

6. Set the max width of the modal popup.

$('.popup-item').popup({
  maxWidth: '80%'
});

7. Determine whether or not to close the modal popup by clicking the background overlay.

$('.popup-item').popup({
  clickableBg: true
});

8. Callback functions which will be fired when the modal popup is opened & closed.

$('.popup-item').popup({
  onOpened: function (sender) {
    // do something
  },
  onClosed: function (sender) {
    // do something
  }
});

---

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