Simple modal Box usando CSS y: target pseudo Class

Vista prévia

Descripción

Una solución CSS pura para mostrar una ventana modal de pantalla completa usando : target pseudo clase.

Este modal está abierto porque su ID es el destino en el href del vínculo. Puede estila el estado de destino de un elemento con el selector : target .

Cuando se cambia este modal, un vínculo invisible con href = "#" se coloca absolutamente detrás del contenido modal. Al hacer clic en él cambiará el objetivo y, por lo tanto, cerrará el modal.

Funcionamiento

Cree un vínculo de alternancia para iniciar la ventana modal.

<a href="#target-content" id="button">Open A Modal</a>

Agregue el contenido al modal.

<div id="target-content">

<a href="#" class="close"></a>

<div id="target-inner">


<h2>Modal Heading</h2>


<p>Modal Content</p>

</div>
</div>

Los estilos CSS principales.

#target-content {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

pointer-events: none;

opacity: 0;

-webkit-transition: opacity 200ms;

transition: opacity 200ms;
}

#target-content:target {

pointer-events: all;

opacity: 1;
}

#target-content #target-inner {

position: absolute;

display: block;

padding: 48px;

line-height: 1.8;

width: 70%;

top: 50%;

left: 50%;

-webkit-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);

background: white;

color: #34495E;
}

#target-content #target-inner h2 { margin-top: 0; }

#target-content #target-inner code { font-weight: bold; }

#target-content a.close {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: #34495E;

opacity: 0.5;

-webkit-transition: opacity 200ms;

transition: opacity 200ms;
}

#target-content a.close:hover { opacity: 0.4; }