Nur-CSS Modal Lightbox beim Laden der Seite

In einem früheren Beitrag habe ich gezeigt, wie man ein Modal/Lightbox nur mit CSS erstellt. Viele fragten, wie es automatisch beim Laden der Seite erscheint—ohne Button-Klick. Hier ist die genaue Vorgehensweise.

In meinem früheren Beitrag Easy Modal Lightbox Pop-Up habe ich erklärt, wie man ein Pop-up bzw. eine Lightbox allein mit CSS hinzufügt. Weil oft gefragt wurde, wie es beim Seitenladen statt per Button öffnet, folgt hier die Anleitung.

HTML

Kopiere den folgenden Code und füge ihn in dein HTML-Dokument ein.

<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

Kopiere den folgenden Code und füge ihn in deine CSS-Datei ein.

.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 ist optional und steuert die Öffnungsanimation. Die Dauer kannst du anpassen—aktuell opac 0.8s.

Fehlersuche (wenn das Pop-up nicht erscheint)

• CSS-Ladung sicherstellen: das Modal stützt sich auf display: block und feste Overlay-Styles; prüfe, ob dein Theme das überschreibt.
• z-index-Konflikte: Header oder Sticky-Leisten mit höherem z-index können das Modal überdecken; ggf. auf .modal { z-index: 9999; } erhöhen.
• Versteckte Regeln: manche Themes/Plugins setzen .modal{display:none}. Suche nach solchen Overrides.
• Nur eine Instanz: doppelte IDs oder mehrere Modals verursachen ungewöhnliches Verhalten.
• Cache/CDN: leere Caches, wenn Änderungen nicht sichtbar sind.

Hinweis: Der Schließen-Button nutzt inline onclick. Für eine komplett JavaScript-freie Variante kann ich ein Checkbox/Label-Pattern ergänzen.