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

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.

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.

  • Publication date: 08.01.2019
  • Source