Responsive Link-triggered Modal Plugin With jQuery - simple-overlay
File Size: | 11.5 KB |
---|---|
Views Total: | 3004 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.