لنفترض أن لدينا حاوية حاوية على النحو التالي:
انسخ رمز الكود كما يلي:
<نمط النوع = "نص/CSS">
#container{width:auto;height:auto;
/*السمة الفائضة: مخفية هنا هي في الأساس تعيين الجزء الموجود خارج الحاوية ليتم إخفاؤه تلقائيًا، والسبب في تعيين هذه السمة هو حل مشكلة توافق المتصفح في IE8 والإصدارات الأقدم.
</نمط>
<div معرف = "حاوية">
</div>
نريد الآن إظهار طبقة div في صفحة الويب بحيث لا يمكن تشغيل الحاوية قبل إغلاق طبقة div المنبثقة.
بعد ذلك، نحتاج أولاً إلى تحديد طبقة div لهذا القناع على النحو التالي:
انسخ رمز الكود كما يلي:
<div معرف = "القارة">
<!―فقط ضع طبقة القناع داخل الحاوية
<divid=”shade” style=”width:1600px;height:900px;/*أعط طبقة القناع حجمًا أوليًا*/”>
<اسم الإدخال =”إغلاق” معرف =”إغلاق” القيمة =”إغلاق”>
</div>
</div>
بعد ذلك، استخدم js لجعل طبقة القناع معروضة دائمًا على الشاشة ولا يمكن معالجة المحتوى الموجود أسفل طبقة القناع. انقر فوق زر الإغلاق لإغلاق طبقة القناع.
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
$(وظيفة(){
// احصل على العرض والارتفاع الداخلي للمتصفح الحالي
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
// اضبط عرض وارتفاع طبقة القناع
$("#shade").width(nWidth);
$("#shade").height(nHeight);
// اضبط زر الإغلاق ليتم عرضه في المركز
$("#إغلاق").css("margin-top",nHeight/2-50+"px");
// قم بتعيين الحدث الذي يتم تشغيله عندما يتغير حجم المتصفح
$(نافذة).تغيير الحجم(وظيفة(){
// احصل على العرض والارتفاع الداخلي للمتصفح الحالي
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
// اضبط عرض وارتفاع طبقة القناع
$("#shade").width(nWidth);
$("#shade").height(nHeight);
// اضبط زر الإغلاق ليتم عرضه في المركز
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
// اضبط زر الإغلاق لإزالة طبقة القناع
$("#إغلاق").انقر(وظيفة(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
// يمكن أيضًا كتابته بلغة js النقية
Document.getElementById("الظل").style…….;
// لا فائدة من قول المزيد لاحقًا. إذا كنت مهتمًا ولكنك لا تعرف حقًا كيفية الكتابة، فيمكنك الاتصال بي.
})
</script>