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

File Size: 11.5 KB
Views Total: 2957
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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

<a href=""
  data-vimeo="<iframe src='' width='640' height='360' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
<a href=""
   data-youtube="<iframe width='560' height='315' src='' frameborder='0' allowfullscreen></iframe>"
  "insertBy": "embed",
  "attribute": "data-vimeo"

  "insertBy": "embed",
  "attribute": "data-youtube"

5. Execute a callback after the modal is shown.

  // options here
}, function () {
  // callback

6. Possible plugin options.

  "namespace": "simple-overlay",
  "insertBy": "load",
  "attribute": "href",
  "speed": 400

Change log:


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