CSS-alleen modal/lightbox bij het laden van de pagina

In een eerder artikel liet ik zien hoe je een modal/lightbox maakt met alleen CSS. Veel lezers vroegen hoe je deze automatisch laat verschijnen bij het laden van de pagina—zonder op een knop te klikken. Hier is de exacte aanpak.

In mijn eerdere post Easy Modal Lightbox Pop-Up deelde ik hoe je een pop-up of lightbox alleen met CSS toevoegt. Omdat vaak werd gevraagd hoe hij bij het laden van de pagina opent in plaats van via een knop, volgt hier de how-to.

HTML

Kopieer de onderstaande code en plak die in je HTML-document.

<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

Kopieer de onderstaande code en plak die in je CSS-bestand.

.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 is optioneel en verzorgt de openingsanimatie. De duur kun je aanpassen—nu opac 0.8s.

Probleemoplossing (als de pop-up niet verschijnt)

• Controleer of CSS geladen is: het modal vertrouwt op display: block en vaste overlay-stijlen; kijk of je thema die niet overschrijft.
• z-index-conflicten: headers of sticky bars met hogere z-index kunnen het modal bedekken; verhoog indien nodig naar .modal { z-index: 9999; }.
• Verborgen regels: sommige thema’s/plugins zetten .modal{display:none}. Zoek in je CSS naar overrides.
• Eén instantie per pagina: dubbele ID’s of meerdere instanties veroorzaken vreemd gedrag.
• Cache/CDN: leeg de cache als wijzigingen niet te zien zijn.

Opmerking: De sluitknop gebruikt inline onclick. Voor een volledig JavaScript-vrije variant kan ik een checkbox/label-patroon toevoegen.