يقدم هذا الفصل كيفية النقر فوق زر لإطفاء نافذة مركزية ، وهذه النافذة لها تأثير مخففة شفاف. .
الرمز كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "uptor" content = "http://www.softwhy.com/"/>
<title> ant tribe </title>
<type type = "text/css">
#يختفي {
العرض: لا شيء ؛
الموقف: مطلق ؛
أعلى: 0 ٪ ؛
اليسار: 0 ٪ ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
خلفية اللون: أسود ؛
Z-Index: 1001 ؛
-الموز سعة: 0.8 ؛
العتامة: .80 ؛
مرشح: ألفا (عتامة = 80) ؛
}
#ضوء{
العرض: لا شيء ؛
الموقف: مطلق ؛
أعلى: 25 ٪ ؛
اليسار: 25 ٪ ؛
العرض: 50 ٪ ؛
الارتفاع: 50 ٪ ؛
الحشو: 16 بكسل ؛
الحدود: 3 بكسل أو برتقالي صلبة.
خلفية اللون: أبيض.
Z-index: 1002 ؛
الفائض: السيارات ؛
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var linkbt = document.getElementById ("linkbt") ؛
var light = document.getElementById ('light') ؛
var fade = document.getElementById ('fade') ؛
var closeBt = document.getElementById ("closeBt") ؛
linkbt.onclick = function () {
light.style.display = 'block' ؛
fade.style.display = 'block' ؛
}
closebt.onclick = function () {
light.style.display = 'none' ؛
fade.style.display = 'none' ؛
}
}
</script>
</head>
<body>
<a href = "javaScript: void (0)" id = "linkbt"> انقر هنا لفتح النافذة </a>
<div id = "light"> <a href = "javaScript: void (0)" id = "closebt"> إغلاق نافذة </a> </viv>
<div id = "fade" "> </viv>
</body>
</html>
الرمز أعلاه ينفذ متطلباتنا ، ويقدم ما يلي بإيجاز عملية التنفيذ الخاصة به.
1. مبدأ التنفيذ:
بشكل افتراضي ، يتم إخفاء طبقة القناع والنافذة. يستخدم كلا العنصرين تحديد المواقع المطلقة وتعيين قيمة سمة z-index للنافذة المتمركزة لتكون أكبر من طبقة القناع ، بحيث يمكن تغطيةها على طبقة القناع. عند النقر فوق الزر "إغلاق" ، يمكن إخفاء طبقة القناع والنافذة ، والمبدأ هو نفسه تقريبًا.