تصف هذه المقالة طريقة تنفيذ الطبقة المنبثقة التي تغطي الصفحة بأكملها بواسطة JS و CSS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
الأنماط والهياكل الشائعة لخلفيات شفافة مؤطرة على الطبقة المنبثقة هي كما يلي:
نسخة الكود كما يلي: .alertMessageBg {
الموقف: ثابت ؛
_position: مطلق ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
اليسار: 0 ؛
أعلى: 0 ؛
الخلفية:#000 ؛
العتامة: 0.5 ؛
-الموز سعة: 0.5 ؛
مرشح: ألفا (عتامة = 50) ؛
Z-index: 97 ؛
العرض: لا شيء ؛
}
.alertmessagedivborder {
الموقف: ثابت ؛
_position: مطلق ؛
العرض: 750 بكسل ؛
الارتفاع: 370 بكسل ؛
اليسار: 50 ٪ ؛
أعلى: 50 ٪ ؛
الهامش: -185px 0 0 -375px ؛
الخلفية:#000 ؛
مرشح: ألفا (عتامة = 30) ؛
-الموز سعة: 0.3 ؛
العتامة: 0.3 ؛
Z-index: 98 ؛
العرض: لا شيء ؛
}
.alertmessagediv {
الموقف: ثابت ؛
_position: مطلق ؛
العرض: 730 بكسل ؛
الارتفاع: 350 بكسل ؛
اليسار: 50 ٪ ؛
أعلى: 50 ٪ ؛
الهامش: -175px 0 0 -365px ؛
الخلفية: #fff ؛
Z-index: 99 ؛
العرض: لا شيء ؛
حجم الخط: 14px ؛
}
<viv> </viv>
<viv> </viv>
<viv> </viv>
كيفية تغطية صفحة الويب بأكملها بخلفية منبثقة
1.CSS طريقة
نسخة الكود كما يلي: .alertMessageBg {
الموقف: ثابت ؛
_position: مطلق ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
اليسار: 0 ؛
أعلى: 0 ؛
الخلفية:#000 ؛
العتامة: 0.5 ؛
-الموز سعة: 0.5 ؛
مرشح: ألفا (عتامة = 50) ؛
Z-index: 97 ؛
العرض: لا شيء ؛
}
طريقة 2.JS
نسخة الكود كما يلي: .alertMessageBg {
الموقف: مطلق ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
اليسار: 0 ؛
أعلى: 0 ؛
الخلفية:#000 ؛
العتامة: 0.5 ؛
-الموز سعة: 0.5 ؛
مرشح: ألفا (عتامة = 50) ؛
Z-index: 97 ؛
العرض: لا شيء ؛
}
var bgwidth = document.body.clientwidth + 'px' ،
bgheight = document.body.clientheight + 'px' ،
ALERTBGNODE = $ ('. alertMessageBg') ؛
alertbgnode.css ({'width': bgwidth ، 'height': bgheight}) ؛
بمقارنة الطريقتين أعلاه ، من الواضح أن طريقة CSS أسهل في الاستخدام ، خاصة الآن بعد أن لا تحتاج إلى أن تكون متوافقة مع IE6.
آمل أن تكون هذه المقالة مفيدة لبرمجة الويب المستندة إلى JS.