Ventana modal mínima con JavaScript sin formato

Vista prévia

Descripción

Le permite mostrar una superposición modal de pantalla completa simple en su página web. Sin la necesidad de dependencias como la librería jQuery. JavaScript solo es necesario para agregar o quitar clases al abrir/cerrar la ventana modal.

Funcionamiento

Incrustar contenido HTML personalizado en la ventana modal.

<div class="overlay is-hidden" id="overlay">

<div class="modal-content">


<span class="button-close" onclick="closeModal();"></span>


<h3>Modal Heading</h3>


<p>Modal Content</p>

</div>
</div>

Cree un botón de alternancia para iniciar la ventana modal.

<a onclick="openModal();" href="#">Open modal</a>

Agregue sus propios estilos a la ventana modal.

.is-hidden { display: none; }

.button-close {

display: inline-block;

width: 16px;

height: 16px;

position: absolute;

top: 10px;

right: 10px;

cursor: pointer;

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAowAAAKMB8MeazgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB5SURBVDiNrZPRCcAwCEQfnUiySAZuF8kSWeH6Yz8KrQZMQAicJ+epAB0YwAmYJKIADLic0/GPPCbQAnLznCd/4NWUFfkgy1VjH8CryA95ApYltAiTRCZxpuoW+gz9WXE6NPeg+ra1UDIxGlWEObe4SGxY5fIxlc75Bkt9V4JS7KWJAAAAAElFTkSuQmCC59ef34356faa7edebc7ed5432ddb673d');
}

.overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.6);
}

.modal-content {

padding: 20px 30px;

width: 600px;

position: relative;

min-height: 300px;

margin: 5% auto 0;

background: #fff;
}

El núcleo JavaScript para activar la ventana modal.

var overlay = document.getElementById('overlay');

function openModal(){

overlay.classList.remove("is-hidden");
}

function closeModal(){

overlay.classList.add("is-hidden");
}