Modal Lightbox solo CSS al caricamento della pagina

Nel mio post precedente ho spiegato come aggiungere un modal/lightbox usando solo CSS. Molti hanno chiesto come farlo apparire automaticamente al caricamento della pagina—senza cliccare alcun pulsante. Ecco la procedura esatta.

Nell’articolo Easy Modal Lightbox Pop-Up ho mostrato come aggiungere un pop-up o una lightbox solo con CSS. Poiché sono arrivate molte richieste per l’apertura al caricamento della pagina, e non tramite pulsante, ecco il come-fare.

HTML

Copia il codice seguente e incollalo nel tuo 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 il codice seguente e incollalo nel tuo file 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 è opzionale; gestisce l’animazione di apertura. Puoi regolare la durata—attualmente opac 0.8s.

Risoluzione dei problemi (se il pop-up non appare)

• Verifica il caricamento del CSS: il modal si basa su display: block e sugli stili di overlay fisso; controlla che il tema non li sovrascriva.
• Conflitti di z-index: header o barre sticky con z-index più alto possono coprire il modal; aumenta a .modal { z-index: 9999; } se necessario.
• Regole di nascondimento: alcuni temi/plugin impostano .modal{display:none}. Cerca override nel tuo CSS.
• Una sola istanza per pagina: ID duplicati o più istanze possono causare comportamenti anomali.
• Cache/CDN: svuota la cache se le modifiche non si vedono.

Nota: Il pulsante di chiusura usa onclick inline. Per una variante senza JavaScript, posso aggiungere il pattern checkbox/label.