Responsive Link-triggered Modal Plugin With jQuery - simple-overlay

simple-overlay is a tiny and easy-to-use jQuery modal plugin which displays ajax content, Youtube / Vimeo videos in a fullscreen, responsive popup window while preventing window scroll.

How to use it:

1. Link to the style sheet simple-overlay.css that will provide the primary CSS styles for the modal window & fullscreen background overlay.

<link rel="stylesheet" href="simple-overlay.css">

2. Place jQuery library and the simple-overlay.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="simple-overlay.js"></script>

3. Create a link to toggle a modal window that loads an external file via AJAX request.

<a href="ajax.html" class="ajax-demo"></a>

$(".ajax-demo").simpleOverlay();

4. Create a link to toggle a Youtube or Vimeo video modal.

<a href="https://vimeo.com/138192484"
  data-vimeo="<iframe src='https://player.vimeo.com/video/138192484?autoplay=1&title=0&byline=0&portrait=0' width='640' height='360' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
  class="viemo-demo"></a>
  
<a href="https://www.youtube.com/watch?v=c6kiddk735g"
   data-youtube="<iframe width='560' height='315' src='https://www.youtube.com/embed/c6kiddk735g' frameborder='0' allowfullscreen></iframe>"
    class="youtube-demo"></a>

$(".vimeo-demo").simpleOverlay({
  "insertBy": "embed",
  "attribute": "data-vimeo"
});

$(".youtube-demo").simpleOverlay({
  "insertBy": "embed",
  "attribute": "data-youtube"
});

5. Execute a callback after the modal is shown.

$(".ajax-demo").simpleOverlay({
  // options here
}, function () {
  // callback
});

6. Possible plugin options.

$(".ajax-demo").simpleOverlay({
  "namespace": "simple-overlay",
  "insertBy": "load",
  "attribute": "href",
  "speed": 400
});

Change log:

2016-06-14

• Fix to prevent multiple overlays
• Improve no-scroll for body

---

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