Ventana modal básica usando el pseudo elemento CSS

Vista prévia

Descripción

Una ventana modal sólo CSS basada en CSS < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/: target" target = "_ blank" rel = "noopener" >: target pseudo-clase sin la necesidad de JavaScript.

Funcionamiento

Cree el código HTML para la ventana modal.

<div id="open-modal" class="modal-window">

<div>


<a href="#modal-close" title="Close" class="modal-close">Close</a>


<h1>Modal Title</h1>


<div>Modal Content</div>

</div>
</div>

Cree un vínculo de desencadenador que apunte a la ventana modal.

<a href="#open-modal">Launch</a>

Estilo de la ventana modal en el CSS.

.modal-window {

position: fixed;

background-color: rgba(255, 255, 255, 0.25);

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 999;

opacity: 0;

pointer-events: none;

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s;
}

.modal-window > div {

width: 400px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

padding: 2em;

background: #ffffff;

color: #333333;
}

.modal-close {

color: #aaa;

line-height: 50px;

font-size: 80%;

position: absolute;

right: 0;

text-align: center;

top: 0;

width: 70px;

text-decoration: none;
}

.modal-close:hover {

color: #000;
}

Habilite el vínculo de desencadenador para alternar la ventana modal.

.modal-window:target {

opacity: 1;

pointer-events: auto;
}