Basic iFrame Modal Window Plugin With jQuery - vibox

Basic iFrame Modal Window Plugin With jQuery - vibox
File Size: 12.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></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
  
});

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