Caja modal minimalista en Vanilla JavaScript

Vista prévia

Descripción

Una biblioteca modal de JavaScript minimalista de Vanilla que utiliza transiciones y transformaciones CSS3 para las animaciones de apertura y cierre. Totalmente styleable a través de CSS/SCSS.

Funcionamiento

Inserte el archivo JavaScript principal en la Página Web.

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

Cree un botón para alternar la ventana modal.

<button id="modal-window">Click me to open modal</button>

var btn = document.getElementById('modal-window');
btn.addEventListener('click', openModalWindow);

Cree el contenido que se mostrará en la ventana modal y, a continuación, cree una instancia modal y pase los elementos secundarios:

function openModalWindow(e) {

var child = document.createElement('div');



child.className = "inside";

var text = document.createElement('h1');



text.className = "inside-text";



text.innerHTML = "Hello Worlds";

child.appendChild(text);


var modal = new Modal(child, true);

modal.show(); //open the modal window
}

Quite la ventana modal.

modal.unmount();

Los estilos CSS básicos para la ventana modal.

.modal {

position: fixed;

opacity: 0;

display: table;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 5000;
}

.modal-backdrop {

display: table-cell;

vertical-align: middle;

text-align: center;

background-color: rgba(0, 0, 0, .5);
}

.modal-inner {

display: inline-block;

text-align: left;

background-color: #eee;

color: #000;

padding: 20px;
}

#close-modal {

position: absolute;

right: 10px;

top: 10px;

font-size: 1.3em;

cursor: pointer;
}

Aplique las animaciones de fundido al modal mediante CSS3.

.modal.fade .modal-inner {

transform: translateY(-100px);

transition: all .3s ease-in-out;
}

.modal.fade.in {

opacity: 1;

transition: all .3s ease-in-out;
}

.modal.fade.in .modal-inner {

transform: translateY(0);

height: auto;

box-shadow: 0 2px 3px 0 #303030;

border-radius: 2px;

transition: all .3s ease-in-out;

width: auto;

max-width: 80%;

padding: 20px;
}