لايت بوكس/نافذة منبثقة باستخدام CSS فقط عند تحميل الصفحة

في مقال سابق شاركتُ طريقة إضافة نافذة منبثقة/لايت بوكس باستخدام CSS فقط. سأل كثيرون كيف نجعلها تظهر تلقائيًا عند تحميل الصفحة—من دون الضغط على زر. هذه هي الطريقة الدقيقة.

في مقالي السابق Easy Modal Lightbox Pop-Up شرحتُ كيفية إضافة نافذة منبثقة أو لايت بوكس بالاعتماد على CSS فقط. وبعد طلبات متعددة لعرضها عند تحميل الصفحة بدلًا من زر، إليك الخطوات.

HTML

انسخ الشيفرة التالية والصقها في مستند 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

انسخ الشيفرة التالية والصقها في ملف 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 اختيارية؛ فهي تتحكم في حركة الظهور عند فتح النافذة. يمكنك تعديل المدّة—القيمة الحالية opac 0.8s.

استكشاف الأخطاء (إذا لم تظهر النافذة)

• تحقّق من تحميل CSS: يعتمد المودال على display: block وأنماط الغطاء الثابت؛ تأكد أن القالب لا يستبدلها.
• تعارض z-index: قد تغطي رؤوس/أشرطة لاصقة ذات z-index أعلى المودال؛ ارفعها إلى .modal { z-index: 9999; } عند الحاجة.
• قواعد الإخفاء: بعض القوالب/الإضافات تضبط .modal{display:none}. ابحث عن أي override في CSS.
• مثيل واحد لكل صفحة: المعرفات المكررة أو تعدد المثيلات قد يسبّب سلوكًا غير متوقع.
• التخزين المؤقت/CDN: امسح الكاش إذا لم تظهر التغييرات.

ملاحظة: زر الإغلاق يستخدم onclick مضمّنًا. إذا أردت نسخة بلا أي JavaScript، يمكنني إضافة نمط checkbox/label.