Vanilla JavaScript modal popup Library-Novicell superposición

Vista prévia

Descripción

Novicell Overlay es una librería modal de JavaScript Vanilla que se utiliza para superponer cualquier contenido y videos de YouTube/Vimeo en la parte superior de la Página Web.

Funcionamiento

Cargue la hoja de estilos ' novicell. Overlay. css ' en la sección head del documento.

<link href="novicell.overlay.css" rel="stylesheet">

Cargue el código JavaScript ' novicell. Overlay. js ' al final del documento.

<script src="novicell.overlay.js"></script>

Cree un botón de desencadenador para abrir una ventana emergente modal que cargue datos del contenido HTML en línea como estos:

<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'); }


});

});

});

Si deseas reproducir vídeos de YouTube/Vimeo en una ventana emergente modal:

<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'



});



});

}

});

Registro de cambios

11/03/2018

• opción Agregar elemento

v1.0.2 (09/29/2018)

• Agregada reproducción automática