نافذة منبثقة (Modal) باستخدام HTML و CSS بدون JavaScript

نافذة منبثقة (Modal) باستخدام HTML و CSS فقط بدون JavaScript

في هذا المقال، سنقدم نافذة منبثقة (Modal) بتصميم متجاوب يعمل على الهواتف المحمولة، وكل ذلك باستخدام CSS فقط. إذا كنا في السابق نرى هذا النوع من النوافذ يعتمد بشكل كبير على JavaScript لتنفيذ الوظائف الأساسية، فإنه يمكن الآن تحقيق ذلك باستخدام CSS3 فقط، حيث يتم تحديد جميع القيم المطلوبة في الأنماط مباشرة. الميزة الكبيرة هنا هي أن النافذة المنبثقة تعمل دون الحاجة إلى استخدام JavaScript.

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

كما ذكرنا سابقًا، فإن الميزة الرئيسية لهذه النافذة هي أنها تعتمد فقط على HTML و CSS. لماذا يعتبر هذا الأمر مهمًا لأي موقع أو مدونة؟ لأن استخدام عدد أقل من النصوص البرمجية يجعل تحميل الصفحات أسرع وأكثر كفاءة.

هذا على الأقل يضمن أن صفحات الموقع لا تبطئ من أدائه، وهو أمر أصبح مهمًا حتى لمحركات البحث. بالإضافة إلى ذلك، يمكن استخدام هذه النوافذ في العديد من الوظائف المختلفة على الموقع.

من حيث التصميم، يمكنك ملاحظة أن كل شيء يتم وفقًا للمعايير، بتصميم بسيط وواضح. ولكن يمكن بسهولة تغيير الألوان والظلال من خلال الأنماط المحددة في CSS.

شرح كود نافذة منبثقة (Modal) باستخدام HTML و CSS فقط

الهيكل الأساسي (HTML)

<a class="btn-modal" href="#open-window-content">Open</a>
<div class="modal-overlay" id="open-window-content">
  <div class="open-window">
    <h5>Lorem ipsum</h5><a class="close" href="#">×</a>
    <div class="modal-content-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.
      </p>
    </div>
  </div>
</div>

شرح الهيكل:

• <a class="btn-modal">: زر لفتح النافذة المنبثقة. عند النقر عليه، يتم التمرير إلى العنصر الذي يحمل المعرف #open-window-content.
• <div class="modal-overlay">: طبقة التعتيم الخلفية للنافذة المنبثقة. يتم إظهارها عند النقر على الزر.
• <div class="open-window">: النافذة المنبثقة نفسها، تحتوي على العنوان والمحتوى.
• <a class="close">: زر لإغلاق النافذة المنبثقة. عند النقر عليه، يتم إخفاء النافذة.
• <div class="modal-content-body">: منطقة المحتوى داخل النافذة المنبثقة.

الأنماط (CSS)

تنسيق زر الفتح:

.btn-modal {
  color: #fff;
  cursor: pointer;
  line-height: 3rem;
  padding: 1rem 3rem;
  text-decoration: none;
  background-color: #83bec5;
  transition: all 0.3s ease-out;
}
.btn-modal:hover {
  background-color: #527c82;
}

• يتم تنسيق الزر بلون خلفية أزرق فاتح ونص أبيض.
• عند التمرير فوق الزر، يتغير لون الخلفية إلى لون أزرق داكن.

تنسيق طبقة التعتيم:

.modal-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 500ms;
  visibility: hidden;
  height: 100%;
  opacity: 0;
}
.modal-overlay:target {
  visibility: visible;
  opacity: 1;
}

• يتم تعيين طبقة التعتيم لتغطية الصفحة بالكامل.
• يتم إظهارها عند النقر على الزر باستخدام :target.

تنسيق النافذة المنبثقة:

.open-window {
  margin: 70px auto;
  padding: 1em;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s ease-out;
}
.open-window h5 {
  margin: 1em 0;
  color: #333;
  font-family: 'Raleway', sans-serif;
}

• يتم تنسيق النافذة بخلفية بيضاء وحواف مدورة.
• يتم توسيط النافذة على الصفحة.

تنسيق زر الإغلاق:

.open-window .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.open-window .close:hover {
  color: #83bec5;
}

• يتم وضع زر الإغلاق في الزاوية العلوية اليمنى من النافذة.
• عند التمرير فوق الزر، يتغير لونه إلى الأزرق الفاتح.

تنسيق المحتوى:

.modal-content-body {
  overflow: auto;
}
.modal-content-body p {
  text-align: justify;
}

• يتم تمكين التمرير داخل منطقة المحتوى إذا كان المحتوى طويلاً.
• يتم محاذاة النص بشكل متساوٍ على الجانبين.

تنسيق شريط التمرير:

::-webkit-scrollbar {
  z-index: 30;
  width: 5px;
  height: 0;
  y-index: hidden;
}
::-webkit-scrollbar-track {
  background-color: #111;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #2b2e33;
}
::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}

• يتم تخصيص شريط التمرير لعرضه بشكل أنيق.
• يتم تغيير لون شريط التمرير عند التمرير فوقه.

آلية العمل

• عند النقر على زر "Open"، يتم التمرير إلى العنصر الذي يحمل المعرف #open-window-content.
• يتم إظهار طبقة التعتيم والنافذة المنبثقة باستخدام :target.
• عند النقر على زر الإغلاق (×)، يتم إخفاء النافذة المنبثقة.

المزايا

• بدون JavaScript: يعتمد على HTML و CSS فقط.
• متجاوب: يعمل على جميع الأجهزة.
• سهل التخصيص: يمكن تغيير الألوان والأحجام بسهولة.

العيوب

• يدوي فقط: لا يمكن إغلاق النافذة بالضغط خارجها.
• محدودية التأثيرات: لا يدعم تأثيرات متقدمة مثل التلاشي أو التكبير.

الكود كاملا

<a class="btn-modal" href="#open-window-content">Open</a>
<div class="modal-overlay" id="open-window-content">
  <div class="open-window">
    <h5>Lorem ipsum</h5><a class="close" href="#">×</a>
    <div class="modal-content-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.
      </p>
    </div>
  </div>
</div>
    

/* زر */
.btn-modal {
  fcolor: #fff;
  cursor: pointer;
  line-height: 3rem;
  padding: 1rem 3rem;
  color: #fff;
  text-decoration: none;
  background-color: #83bec5;
  transition: all 0.3s ease-out;
}
.btn-modal:hover {
  background-color: #527c82;
}

/* إزالة الخلفية */
.modal-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 500ms;
  visibility: hidden;
  height: 100%;
  opacity: 0;
}
.modal-overlay:target {
  visibility: visible;
  opacity: 1;
}

/* نافذة نموذجية */
.open-window {
  margin: 70px auto;
  padding: 1em;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s easeout;
}
.open-window h2 {
  margin: 1em 0;
  color: #333;
  font-family: 'Raleway', sans-serif;
}

/* زر الإغلاق */
.open-window .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.open-window .close:hover {
  color: #83bec5;
}
.open-window .modal-content-body {
  overflow: auto;
}
.modal-content-body p{
  text-align: justify;
}
::-webkit-scrollbar {
  z-index: 30;
  width: 5px;
  height: 0;
  y-index: hidden;
}
::-webkit-scrollbar-track {
  background-color: #111;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #2b2e33;
}
::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}