Vanilla JavaScript Modal Popup Library – Novicell Overlay

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