Vanilla JavaScript Modal Popup Library – Novicell Overlay

Category: Javascript , Modal & Popup | August 3, 2019
Author: Novicell
Views Total: 2,411
Official Page: Go to website
Last Update: August 3, 2019
License: MIT

Preview:

Vanilla JavaScript Modal Popup Library – Novicell Overlay

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();

    novicell.overlay.create({
      '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'); }
    });
  });

});

If you’d like 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;

      novicell.overlay.create({
        'videoId': currentTrigger.getAttribute('data-video-id'),
        'type': currentTrigger.getAttribute('data-type'),
        'class': 'video-overlay'
      });

    });
  }

});

Changelog:

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

You Might Be Interested In:


Leave a Reply