تصف هذه المقالة طريقة JS+CSS لتنفيذ النوافذ المنبثقة DIV وتغميق الخلفية. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> JS+CSS تنفيذ نافذة Div المنبثقة ، بينما تصبح الخلفية أغمق </title>
<script>
وظيفة locking () {
document.all.ly.style.display = "block" ؛
document.all.ly.style.width = document.body.clientwidth ؛
document.all.ly.style.height = document.body.clientheight ؛
document.all.layer2.style.display = 'block' ؛
}
وظيفة lock_checkform (theform) {
document.all.ly.style.display = 'none' ؛ document.all.layer2.style.display = 'none' ؛
العودة كاذبة
}
</script>
<type type = "text/css">
<!-
.style1 {font-size: 12px}
ج: الرابط {
اللون: #000 ؛
تدمير النص: لا شيء ؛
}
ج: زار {
تدمير النص: لا شيء ؛
}
ج: تحوم {
تدمير النص: لا شيء ؛
}
ج: نشط {
تدمير النص: لا شيء ؛
}
->
</style>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
</head>
<body>
<p align = "center">
<type type = "button" value = "popup div" onClick = "locking ()" />
</p>
<div id = "ly" style = "الموضع: المطلق ؛ الأعلى: 0px ؛ مرشح: ألفا (عتامة = 60) ؛ الخلفية اللون: #777 ؛
Z-index: 2 ؛ اليسار: 0px ؛ العرض: لا شيء ؛ ">
</div>
<!-ابدأ الإطار العائم->
<div id = "layer2" align = "center" style = "position: absolute ؛ z-index: 3 ؛ left: expression ((document.OffSetWidth-540)/2) ؛ top: expression ((document.body.offsetheight-170)/10) ؛
خلفية اللون: #fff ؛ العرض: لا شيء ؛ ">
<table cellpadding = "0" cellpacing = "0" style = "border: 0 Solid #e7e3e7 ؛
حدود الحدود: الانهيار ؛ ">
<tr>
<td style = "خلفية اللون: #73a2d6 ؛ اللون: #ffff ؛ padding-left: 4px ؛ padding-top: 2px ؛
خط الرصيف: جريئة ؛ حجم الخط: 12px ؛ "valign =" middle ">
<div align = "right"> <a href = javaScript: ؛ onClick = "lock_checkform (this) ؛"> [close] </a> </viv> </td>
</r>
<tr>
<td align = "center">
<br> <br> <hr> <p align = "center"> <font color = Red> يتم جمع هذه المؤثرات الخاصة من الإنترنت للحصول على الاهتمام والتعلم فقط ، وليس للأغراض التجارية. المصدر: wulin.com </font> </p>
</td>
</r>
</table>
</div>
<!-نهاية الإطار العائمة->
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.