Basic iFrame Modal Window Plugin With jQuery - vibox

vibox is a small iframe lightbox plugin for jQuery which allows you to embed any iframe content (for example: webpages, Youtube/Vimeo videos, etc) into a customizable modal popup.

More features:

• Responsive design.
• Allows to preload modal content.
• Event handlers.

How to use it:

1. Import jQuery library and the jQuery iframe lightbox plugin's files into your html file as these:

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

2. Call the function on the modal trigger element and specify the data source you want to load.

<button type="button" class="demo">
  Launch The Modal
</button>

$('.demo').vibox({
  src: 'https://www.youtube.com/embed/fhMZFHGTFQU'
});

3. Customize the iframe lightbox with the following plugin settings:

$('.demo').vibox({

  // padding in pixels
  padding: 0,

  // background color of padding
  paddingColor: '#ffffff',

  // border radius in pixels
  borderRadius: 0,

  // margin in pixels
  margin: 35,

  // is responsive?
  responsive: true,

  // width/height of the iframe lightbox
  width: 560,
  height: 340,

  // preload iframe content?
  preload: false
  
});

4. Available callbacks.

$('.demo').vibox({

  onClosed: $.noop,
  beforeClosed: $.noop,
  onOpened: $.noop,
  beforeOpened: $.noop
  
});

Changelog:

2021-01-28

• Fixes and refactoring

---

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