Basic iFrame Modal Window Plugin With jQuery - vibox

File Size: 12.2 KB
Views Total: 3255
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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
  src: ''

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


  // 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.


  onClosed: $.noop,
  beforeClosed: $.noop,
  onOpened: $.noop,
  beforeOpened: $.noop



  • 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.