Basic iFrame Modal Window Plugin With jQuery - vibox

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="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.

  • Publication date: 10.01.2018
  • Source