Adaptativo explosivo modal en puro CSS-Explodal

Vista prévia

Descripción

El Explodal le permite crear una ventana modal sensible, bastante fresco con un efecto de explosión utilizando CSS puro.

Funcionamiento

Cree la ventana modal siguiendo el marcado HTML como este:

<div id="explode" class="ui--modal explode">

<div>


<a href="#close" class="material-icons ui--close">Close</a>


<h3 class="huge">Modal Title</h3>


<p>Modal Content Here</p>


<a href="#close" class="ui--button alt">Dismiss</a>

</div>

<div class="bg">


<img src="assets/img/explode-med.gif" id="boooom">

</div>

</div>

Los estilos CSS primarios para la ventana modal.

.ui--modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

opacity: 0;

pointer-events: none;

transition: all 260ms 260ms ease-in-out
}

@media screen and (max-width: 800px) {

.ui--modal { padding: 24px }

}

.ui--modal>div:first-child {

position: relative;

background: #fff;

color: #575265;

width: 100%;

min-width: 320px;

max-width: 580px;

min-height: 320px;

padding: 48px;

box-shadow: 0px 15px 35px 15px rgba(0,0,0,0.2);

opacity: 0;

transform: scale(0.5);

transition: all 260ms 0ms cubic-bezier(0.97, 0.33, 0, -.1)
}

.ui--modal .ui--close {

position: absolute;

top: 24px;

right: 24px
}

.ui--modal p { margin-top: 0 }

.ui--modal .bg {

position: absolute;

z-index: -1;

top: 0;

left: 0;

right: 0px;

width: 100vw;

height: 100vh
}

.ui--modal .bg img {

object-fit: cover;

width: 100vw;

height: 100vh
}

.ui--modal:target {

opacity: 1;

pointer-events: all;

transition: all 260ms 0ms ease-in-out
}

.ui--modal:target>div {

opacity: 1;

transform: scale(1);

transition: all 200ms 300ms cubic-bezier(0.97, 0.33, 0, -.1)
}

Necesita un botón de desencadenador para alternar la ventana modal.

<a href="#explode" onclick="document.getElementById('boooom').setAttribute('src', 'assets/img/explode-med.gif');">Toggle</a>