Modal Lightbox solo con CSS al cargar la página

En una publicación anterior compartí cómo añadir un modal/lightbox solo con CSS. Muchos lectores preguntaron cómo hacer que aparezca automáticamente al cargar la página—sin hacer clic en un botón. Aquí tienes el método exacto.

En mi post anterior Easy Modal Lightbox Pop-Up mostré cómo añadir un pop-up o modal lightbox usando solo CSS. Recibí muchas solicitudes para lograr que se abra al cargar la página en lugar de usar un botón. A continuación, el paso a paso:

HTML

Copia el siguiente código y pégalo en tu documento HTML.

<div id="modal-1" class="modal animate-opacity">
   <div class="modal-content">
      <div class="modal-inner">
         <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">&times;</span>
         <h4>Modal Headline</h4>
         <p>Modal description goes here.</p>
      </div> 
   </div>
</div>

CSS

Copia el siguiente código y pégalo en tu archivo CSS.

.modal {
	z-index: 10;
	display: flex;
        align-items: center;
        justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-opacity es opcional; controla la animación de apertura. Puedes ajustar la duración—actualmente opac 0.8s.

Solución de problemas (si el pop-up no aparece)

• Confirma la carga del CSS: el modal depende de display: block y de estilos de superposición fija; verifica que tu tema no los sobrescriba.
• Conflictos de z-index: cabeceras o barras fijas con z-index mayor pueden cubrir el modal; aumenta a .modal { z-index: 9999; } si es necesario.
• Reglas de ocultación: algunos temas/plugins aplican .modal{display:none}. Busca posibles overrides en tu CSS.
• Una instancia por página: IDs duplicados o varias instancias pueden causar comportamientos extraños.
• Cache/CDN: vacía la caché si no ves los cambios.

Nota: El botón de cierre utiliza onclick inline. Si quieres una variante sin nada de JavaScript, puedo añadir el patrón de checkbox/label.