Modal Lightbox uniquement en CSS au chargement de la page

Dans un précédent article, j’ai montré comment ajouter un modal/lightbox uniquement avec du CSS. Beaucoup m’ont demandé comment l’afficher automatiquement au chargement de la page—sans cliquer sur un bouton. Voici la méthode précise.

Dans mon article Easy Modal Lightbox Pop-Up, j’ai expliqué comment ajouter un pop-up ou un lightbox en CSS uniquement. Après de nombreuses demandes pour l’ouvrir au chargement de la page plutôt qu’avec un bouton, voici le mode d’emploi.

HTML

Copiez le code suivant et collez-le dans votre document 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

Copiez le code suivant et collez-le dans votre fichier 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 est facultatif : il gère l’animation d’ouverture. Vous pouvez ajuster la durée—actuellement opac 0.8s.

Dépannage (si le pop-up ne s’affiche pas)

• Vérifiez le chargement du CSS : le modal s’appuie sur display: block et les styles d’overlay fixe ; assurez-vous que votre thème ne les écrase pas.
• Conflits de z-index : des en-têtes ou barres fixes avec un z-index plus élevé peuvent couvrir le modal ; augmentez à .modal { z-index: 9999; } si besoin.
• Règles d’occultation : certains thèmes/plugins appliquent .modal{display:none}. Recherchez des overrides dans votre CSS.
• Une seule instance par page : des IDs dupliqués ou plusieurs instances causent des comportements étranges.
• Cache/CDN : purgez la cache si les changements n’apparaissent pas.

Remarque : le bouton de fermeture utilise un onclick inline. Pour une variante 0 JavaScript, je peux ajouter le pattern checkbox/label.