Superposición mínima modal en CSS puro

Vista prévia

Descripción

Sólo otra solución modal de superposición de CSS puro sin ningún JS y casilla de verificación & trucos de etiqueta. Haga clic en el área en blanco de la superposición de fondo para cerrar el modal.

Funcionamiento

Agregue el encabezado, el contenido del cuerpo y el botón de cierre al modal como este:

<div id="modal1" class="overlay">

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

<div class="modal">


<h2>This is Modal Overlay 1</h2>


<div class="content">


<p>Click outside the modal to close.</p>


</div>

</div>
</div>

Cree un vínculo de alternancia modal que apunte al identificador modal que acaba de crear.

<a href="#modal1" class="button">Open Modal</a>

Estilo el modal en el CSS.

.modal {

margin: 100px auto;

padding: 20px;

background: #fff;

border: 1px solid #666;

width: 300px;

border-radius: 6px;

box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);

position: relative;
}

.modal h2 { margin-top: 0; }

.modal .close {

position: absolute;

width: 20px;

height: 20px;

top: 20px;

right: 20px;

opacity: 0.8;

transition: all 200ms;

font-size: 24px;

font-weight: bold;

text-decoration: none;

color: #777;
}

.modal .close:hover { opacity: 1; }

.modal .content {

max-height: 400px;

overflow: auto;
}

.modal p {

margin: 0 0 1em;

text-align: center;
}

.modal p:last-child { margin: 0; }

Estilo de la superposición de fondo de pantalla completa.

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

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

transition: opacity 200ms;

visibility: hidden;

opacity: 0;
}

.overlay .cancel {

position: absolute;

width: 100%;

height: 100%;

cursor: default;
}

.overlay:target {

visibility: visible;

opacity: 1;
}