Ligero personalizable modal & lightbox JS Library-Uglipop. js

Vista prévia

Descripción

Uglipop. js es una biblioteca de JavaScript pura que hace que sea más fácil mostrar popups modales altamente personalizables en su página web/aplicación.

Es compatible con la incrustación de cualquier contenido HTML como DIVs, iFrames, imágenes, contenido Ajax, HTML llano, etc.

Sin ningún recurso externo y se puede utilizar la clase CSS simple para el estilo de la Uglipop modal de acuerdo a su necesidad.

¿Cómo funciona?

Descargue e incluya el Uglipop. js en su documento.

<script src="uglipop.js"></script>

Cree el contenido modal que está oculto en la carga de la página.

<div id="modalDemo" style="display:none;">

<h2>Modal Title</h2>

<hr>

<p>Modal Content Goes Here</p>

<p>You can use simple CSS class to style the Uglipop Modal according to your need. </p>
</div>

Cree un botón para desencadenar el modal.

<button onclick='modalTrigger();'>Click me</button>

Estilo de la ventana modal lo que quieras.

.modalWrapper {

border-radius: 10px;

background-color: white;

width: 300px;

height: 300px;

padding: 10px;

-webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);

-moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);

box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
}

Habilite la ventana modal & botón de desencadenador.

var modalTrigger = function(){


uglipop({



class:'modalWrapper',



source:'div',



content:'modalDemo'


})
;}

Todos los parámetros.

uglipop({


// styling class for Modal

class:'modalWrapper',


// source type. 'div' or 'html'

source:'div',


// class name for 'div'

// html markup for 'html'

content:'modalDemo'


})