النوافذ المنبثقة موجودة في كل مكان عبر الإنترنت ، لكنها ليست كلها سيئة. تعرف على كيفية إنشاء نافذة منبثقة حسنة التصرف باستخدام تقنيات الويب القياسية.

تجعل النوافذ المنبثقة جيدة التصميم موقع الويب الخاص بك أكثر تفاعلية وحداثة. يمكنهم إنشاء أسواق وزيادة المبيعات للشركات.

يمكنك إنشاء نوافذ منبثقة باستخدام HTML و CSS و JavaScript. استخدم الدليل التالي لإنشاء وتصميم نافذة منبثقة من البداية. يجعل موقع الويب الخاص بك تفاعليًا ويخلق تجارب مستخدم رائعة.

اكتب HTML لهيكلة المحتوى

دعنا نكتب بعض كود HTML الذي يحتوي على نافذة مشروطة مخفية تنبثق عند النقر فوق زر. في هذه الحالة ، ستعرض معنى الكلمة مرحبًا! ستحتوي النافذة المنبثقة على عنوان وبعض المحتويات.

فور تشغيل النافذة المشروطة ، يتم إلقاء تأثير ضبابي على الخلفية. أضف فئات إلى الأقسام التي ستستخدمها لتحديد النموذج لاحقًا في JavaScript.

<جسم>
<زرفصل="نمط مفتوح">مرحبًا!زر>
<شعبةفصل="محتوى مشروط مخفي مشروط">
<شعبةفصل="رأس مشروط">
<h3>معنى مرحبا!h3>
<زرفصل="قريب من الوسائط">×زر>
شعبة>


<شعبةفصل="جسم مشروط">
<ص>مرحبا هي تحية في اللغة الإنجليزية. يتم استخدامه في
 بداية الجملة كمقدمة سواء بشكل شخصي أو
 على الهاتف.ص>
شعبة>
شعبة>





instagram viewer

<شعبةفصل="blur-bg hidden-blur">شعبة>
<النصيsrc="script.js">النصي>
جسم>

يجب أن تظهر الصفحة بالشكل التالي:

يمكنك أيضًا البحث في ملف عنصر حوار HTML إذا كنت تتطلع إلى استخدام الترميز الأكثر دلالات.

اكتب CSS لإضافة نمط

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

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

* {
هامِش: 0;
حشوة: 0;
تحجيم الصندوق: مربع الحدود;
ارتفاع خط: 1;
}
جسم {
ارتفاع: 100%;
عرض: ثني;
تبرير المحتوى: مركز;
الاتجاه المرن: عمود;
محاذاة العناصر: مركز;
خلفية: #000;
فجوة: 30مقصف;
}

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

.open-modal {
خلفية: # 20c997;
لون: #fff;
حدود: لا أحد;
حشوة: 20مقصف 40مقصف;
حجم الخط: 48مقصف;
نصف قطر الحد: 100مقصف;
المؤشر: المؤشر;
انتقال: الجميع 0.3 ثانية;
الخطوط العريضة: لا أحد;
}
.open-modal:نشيط {
تحول: ترجم(-17 بكسل);
}

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

أعطه أيضًا فهرس z ، بحيث يظهر أمام مفتوح زر. بالإضافة إلى ذلك ، قم بتعيين ملف مشروط مخفي يتم عرضه على أنه لا شيء ، لذلك يظل مخفيًا حتى تقوم بتشغيله.

.modal-content {
خلفية: #ccc;
عرض: 500مقصف;
حشوة: 20مقصف;
نصف قطر الحد: 10مقصف;
الفهرس z: 99;
}
.modal-header {
عرض: ثني;
تبرير المحتوى: الفضاء بين;
الهامش السفلي: 16مقصف;
لون: #000;
حجم الخط: 30مقصف;
}


.modal-bodyص { 
حجم الخط: 22مقصف;
ارتفاع خط: 1.5; 
} 
.hidden-modal { 
عرض: لا أحد; 
}

ثم نمط قريب من الوسائط زر بخلفية شفافة ومحاذاة في المنتصف.

.close-modal {
خلفية: شفاف;
حدود: لا أحد;
عرض: ثني;
محاذاة العناصر: مركز;
تبرير المحتوى: مركز;
ارتفاع: 20مقصف;
عرض: 20مقصف;
حجم الخط: 40مقصف;
}
.close-modal:يحوم {
لون: # fa5252;
}

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


.blur-bg {
موضع: مطلق;
قمة: 0;
غادر: 0;
ارتفاع: 100%;
عرض: 100%;
خلفية: rgba(0, 0, 0, 0.3);
مرشح الخلفية: طمس(5مقصف);
}
.hidden-blur {
عرض: لا أحد;
}

بعد الإضافة في CSS ، يجب أن تبدو الصفحة كما يلي:

التحكم في Popup With JavaScript Code

ستستخدم JavaScript لفتح وإغلاق النافذة المشروطة من خلال إظهارها أو إخفائها. يضيف المستمعين الحدث إلى الزر لتشغيله ليتم فتحه وإغلاقه عند النقر فوقه.

حدد أولاً العناصر ذات الصلة باستخدام فئات CSS التي حددتها في HTML:

يترك modalContent = وثيقة.querySelector (".modal-content");
يترك openModal = وثيقة.querySelector (".open-modal");
يترك closeModal = وثيقة.querySelector (".close-modal");
يترك blurBg = وثيقة.querySelector (".blur-bg");

إضافة مستمع الحدث إلى مفتوح زر بحيث يفتح النافذة عند النقر فوقه.

openModal.addEventListener ("انقر", وظيفة () {
 modalContent.classList.remove ("وضع مخفي");
 blurBg.classList.remove ("طمس خفي");
});

قم بتنفيذ الإجراءات المعاكسة للتعامل مع إغلاق النافذة المنبثقة ولكن ، هذه المرة ، قم بلفها في وظيفة مسماة. سيؤدي هذا إلى معالجة سلوك الأحداث المتعددة التي قد تتسبب في إغلاق النافذة المشروطة:

يترك closeModalFunction = وظيفة () {
 modalContent.classList.add ("وضع مخفي")
 blurBg.classList.add ("طمس خفي")
}

أضف مستمعين للأحداث للتعامل مع النقرات على الخلفية أو زر الإغلاق ، والحالة التي يضغط فيها المستخدم على مفتاح Escape.

blurBg.addEventListener ("انقر"، closeModalFunction)؛
closeModal.addEventListener ("انقر"، closeModalFunction)؛
وثيقة.addEventListener ("زر أسفل", وظيفة (حدث) {
لو (event.key "يهرب"
 &&! modalContent.classList.contains ("مختفي")
 ) {
 closeModalFunction () ،
 }
});

الآن ، عند النقر فوق ملف مرحبًا! زر ، يظهر مشروط. يمكنك إغلاقها بالنقر فوق الزر "إلغاء الأمر" الموجود على يمين النافذة. انظر الكود على codepen.io والتفاعل مع الوسائط:

استخدامات النوافذ المنبثقة

يتمثل الاستخدام الرئيسي للنوافذ المنبثقة / المشروطة في تطوير الويب في التركيز على عنصر معين على موقع الويب. بمجرد تشغيله ، يقوم بإلغاء تنشيط باقي الصفحة مما يدفع المستخدم إلى الاهتمام بها.

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