Author: | Novicell |
---|---|
Views Total: | 441 views |
Official Page: | Go to website |
Last Update: | January 23, 2021 |
License: | MIT |
Preview:

Description:
Novicell Overlay is a Vanilla JavaScript modal library used to overlay any content and Youtube/Vimeo videos on top of the webpage.
How to use it:
Load the stylesheet ‘novicell.overlay.css’ in the document’s head section.
<link href="novicell.overlay.css" rel="stylesheet">
Load the JavaScript ‘novicell.overlay.js’ at the end of the document.
<script src="novicell.overlay.js"></script>
Create a trigger button to open a modal popup that loads data from inline HTML content as these:
<button id="js-overlay-trigger" data-element="#js-overlay-content"> Selector overlay </button>
<div class="overlay-content" id="js-overlay-content" style="display: none;"> Modal Conent Here </div>
document.addEventListener("DOMContentLoaded", function () { // Select your overlay trigger var trigger = document.querySelector('#js-overlay-trigger'); trigger.addEventListener('click', function(e){ e.preventDefault(); const instance = new NovicellOverlay({ 'selector': trigger.getAttribute('data-element'), 'class': 'selector-overlay', 'autoplay': 1, "onCreate": function() { console.log('created'); }, "onLoaded": function() { console.log('loaded'); }, "onDestroy": function() { console.log('Destroyed'); } }); // trigger the modal instance.create(); }); });
If you’d like to play Youtube/Vimeo videos in a modal popup:
<button data-video-id="152477009" data-type="vimeo" class="js-video-overlay-trigger"> Vimeo overlay </button> <button data-video-id="5dsGWM5XGdg" data-type="youtube" class="js-video-overlay-trigger"> YouTube overlay </button>
document.addEventListener("DOMContentLoaded", function () { // Video overlay var videoOverlayTriggers = document.querySelectorAll('.js-video-overlay-trigger'); for (var i = 0; i < videoOverlayTriggers.length; i++) { videoOverlayTriggers[i].addEventListener('click', function(e){ e.preventDefault(); var currentTrigger = e.target; const instance = new NovicellOverlay({ 'videoId': currentTrigger.getAttribute('data-video-id'), 'type': currentTrigger.getAttribute('data-type'), 'class': 'video-overlay' }); // trigger the modal instance.create(); }); } });
All possible options with default values.
const instance = new NovicellOverlay({ // selector of modal content 'selector': '#js-overlay-content', // Youtube or Vimeo video id 'videoId': '9bZkp7q19f0', // if is video? 'isVideo': true, // or 'vimeo' 'type': 'youtube', // disable video tracking 'disableTracking': true, // modal class 'className': 'video-overlay', // auotplay videos 'autoplay': 1, // content element 'element': element.querySelector('.child-element'), // callbacks 'onCreate': function(){}, 'onLoaded': function(){}, 'onDestroy': function(){} });
Changelog:
v2.1.0 (01/23/2021)
- Update
v2.0.6 (11/02/2019)
- Fix Vimeo and YT autoplay
v1.1.2 (08/03/2018)
- Fix Vimeo and YT autoplay
11/03/2018
- add element option
v1.0.2 (09/29/2018)
- Added autoplay