Easy HTML/Iframe Modal Plugin - jQuery modalWindow

A super tiny and easy-to-use jQuery modal plugin for displaying HTML & Iframe content in an animated popup window with ease.

More Features:

• Auto sets the correct width and height according to the iframe content.
• Allows to auto dismiss the modal window after a specified timeout.
• Configurable in/out animations.
• Fully customizable via CSS.

How to use it:

1. Create the HTML for the modal window.

<div class="window-modal js-modal-window js-window-overlay">
  <div class="window-modal__in js-modal-window-in"></div>
</div>

2. The example CSS for the modal & background overlay.

.window-modal {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  overflow-y: auto;
  position: fixed;
  padding: 15px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,0.7);
 }

.window-modal__in {
  position: relative;
  max-width: 100%;
  padding: 26px 30px 30px;
  width: 500px;
  z-index: 1001;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 6px 2px rgba(50,50,50,0.3);
}

.window-activated {
  overflow: hidden;
  margin-right: 17px;
}

3. Enable a trigger element to toggle a basic modal window.

<a href="#" 
   class="js-modal-open" 
   data-modal-text="Modal Content Here">
   Open Modal
</a>

$('.js-modal-open').click(function (event) {
  event.preventDefault();
  var modalText = $(this).data('modal-text');
  modalWindow.show({
    html: modalText,
    animated: true
  });
});

4. Display an internal page in the modal window via iframe.

<a href="#" 
   class="js-modal-open" 
   data-modal-iframe="local.html">
   Open Modal
</a>

$('.js-modal-open-iframe').click(function (event) {
  event.preventDefault();
  var modalIframe = $(this).data('modal-iframe');
  modalWindow.show({
    iframeUrl: modalIframe,
    animated: true
  });
});

5. Fetch and display a Youtube video in the modal window via iframe.

<a href="#" 
   class="js-modal-open" 
   data-modal-iframe="https://www.youtube.com/embed/lFwejwmfUss">
   Open Modal
</a>

6. Default plugin settings which can be used to customize the modal window as per your needs.

// default selectors
selector: {
  outer: '.js-modal-window',
  inner: '.js-modal-window-in' 
},

// extra CSS classes
extraClasses: {
  outer: '',
  inner: ''
},

// iframe URL
iframeUrl: '', 

// modal content
html: '',

// auto dimiss after this timeout
duration: 0, 

// enable animation
animated: true,

// animation speed
animationSpeed: 'fast', 

// show background overlay
overlay: true,

// callback
onComplete: null

---

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