قم بإنشاء نافذة منبثقة باستخدام HTML و CSS و JavaScript -

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

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

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

اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

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

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

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

 <body> 
    <button class="open-modal">Hello!</button> 
 
    <div class="modal-content hidden-modal"> 
        <div class="modal-header"> 
            <h3>Meaning of Hello!</h3> 
            <button class="close-modal">&times;</button> 
        </div> 
 
        <div class="modal-body"> 
            <p>Hello is a greeting in the English language. It is used at 
            the start of a sentence as an introduction whether in person or 
           on the phone.</p> 
        </div> 
    </div>  
 
    <div class="blur-bg hidden-blur"></div> 
    <script src="script.js"></script> 
</body>

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

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

لماذا تقول رسالتي لم يتم تسليمها

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

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

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

 * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    line-height: 1; 
} 
 
body { 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    background: #000; 
    gap: 30px; 
}

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

 .open-modal { 
    background: #20c997; 
    color: #fff; 
    border: none; 
    padding: 20px 40px; 
    font-size: 48px; 
    border-radius: 100px; 
    cursor: pointer; 
    transition: all 0.3s; 
    outline: none; 
} 
 
.open-modal:active { 
    transform: translateY(-17px); 
}

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

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

 .modal-content { 
    background: #ccc; 
    width: 500px; 
    padding: 20px; 
    border-radius: 10px; 
    z-index: 99; 
} 
 
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    color: #000; 
    font-size: 30px; 
} 
 
.modal-body p {  
   font-size: 22px; 
    line-height: 1.5;  
}  
 
.hidden-modal {  
   display: none;  
}

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

 .close-modal { 
    background: transparent; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 20px; 
    width: 20px; 
    font-size: 40px; 
} 
 
.close-modal:hover { 
    color: #fa5252; 
}

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

   
.blur-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(5px); 
} 
 
.hidden-blur { 
    display: none; 
}

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

أين يمكنني قراءة المانجا على الإنترنت

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

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

 let modalContent = document.querySelector(".modal-content"); 
let openModal = document.querySelector(".open-modal"); 
let closeModal = document.querySelector(".close-modal"); 
let blurBg = document.querySelector(".blur-bg");

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

 openModal.addEventListener("click", function () { 
    modalContent.classList.remove("hidden-modal"); 
    blurBg.classList.remove("hidden-blur"); 
});

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

 let closeModalFunction = function () { 
    modalContent.classList.add("hidden-modal") 
    blurBg.classList.add("hidden-blur") 
}

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

 blurBg.addEventListener("click", closeModalFunction); 
closeModal.addEventListener("click", closeModalFunction); 
 
document.addEventListener("keydown", function (event) { 
    if (event.key === "Escape" 
     && !modalContent.classList.contains("hidden") 
   ) { 
        closeModalFunction(); 
    } 
});

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

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

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

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

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

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

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