Mini modal popup con vainilla JavaScript

Vista prévia

Descripción

Una sencilla implementación de JavaScript de vainilla de CSS3 Powered popup modal emergente que soporta cualquier elemento como texto, imágenes, iframes, etc.

Funcionamiento

Cargue el script modal vainilla en la Página Web.

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

Cree la plantilla para el modal.

<div class="modal">

<div class="modal-inner"> <a rel="modal:close">&times;</a>


<div class="modal-content"></div>

</div>
</div>

Inserte el contenido modal en un elemento contenedor.

<div id="modal-demo" style="display:none">

<img src="1.jpg" width="400" height="300">
</div>

Cree un vínculo para desencadenar el modal.

<a href="#modal-demo" rel="modal:open">Open</a>

Estilo el modal en el CSS.

.modal { display: none; }

.vanilla-modal .modal {

display: block;

position: fixed;

content: "";

top: 0;

left: 0;

right: 0;

bottom: 0;

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

z-index: -1;

opacity: 0;

font-size: 0;

transition: opacity 0.2s, z-index 0s 0.2s;

text-align: center;

overflow: hidden;

overflow-y: auto;

white-space: nowrap;

-webkit-overflow-scrolling: touch;
}

.vanilla-modal .modal > * {

display: inline-block;

white-space: normal;

vertical-align: middle;

text-align: left;
}

.vanilla-modal .modal:before {

display: inline-block;

overflow: hidden;

width: 0;

height: 100%;

vertical-align: middle;

content: "";
}

.vanilla-modal.modal-visible .modal {

z-index: 99;

opacity: 1;

transition: opacity 0.2s;
}

.modal-inner {

position: relative;

overflow: hidden;

max-width: 90%;

max-height: 90%;

overflow-x: hidden;

overflow-y: auto;

background: #fff;

z-index: -1;

opacity: 0;

transform: scale(0);

transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
}

.modal-visible .modal-inner {

z-index: 100;

opacity: 1;

transform: scale(1);

transition: opacity 0.2s, transform 0.2s;
}

a[rel="modal:close"] {

position: absolute;

z-index: 2;

right: 0;

top: 0;

width: 25px;

height: 25px;

line-height: 25px;

font-size: 13px;

cursor: pointer;

text-align: center;

background: #fff;

box-shadow: -1px 1px 2px rgba(0,0,0,0.2);
}

Registro de cambios

v1.6.5 (08/07/2017)

• Mueva esta. comprobación de errores actual después de este. Current se ha redefinido en abierto, y corrija la comprobación para asegurarse de que el elemento existe.