إذا كنت لا تعرف بعد ، فيمكنك إلقاء نظرة على هذا المثال البسيط أدناه.
نسخة الكود كما يلي:
<html>
<head>
<title> بعد ظهور نافذة ، لا يتم تشغيل الطبقة اللاحقة </title>
<script>
وظيفة العرض () // إظهار الطبقة الخفية والطبقة المنبثقة
{
var hideobj = document.getElementById ("HideBg") ؛
hidebg.style.display = "block" ؛ // إظهار طبقة خفية
HideBg.style.height = document.body.clientheight+"px" ؛ // اضبط ارتفاع الطبقة المخفية على ارتفاع الصفحة الحالي
document.getElementById ("HideBox"). style.display = "block" ؛ // أظهر الطبقة المنبثقة
}
وظيفة إخفاء () // إزالة الطبقات المخفية والطبقات المنبثقة
{
document.getElementById ("HideBg"). style.display = "none" ؛
document.getElementById ("HideBox"). style.display = "none" ؛
}
</script>
<style>
body {margin: 0px ؛ padding: 0px ؛ text-align: center ؛}
#hidebg {الموضع: Absolute ؛ اليسار: 0px ؛ Top: 0px ؛
خلفية اللون:#000 ؛
العرض: 100 ٪ ؛ /*يتم ضبط العرض على 100 ٪ ، بحيث يمكن لطبقة الخلفية المخفية أن تغطي الصفحة الأصلية*/
مرشح: ألفا (العتامة = 60) ؛ /*ضبط الشفافية على 60 ٪*/
العتامة: 0.6 ؛ /*اضبط الشفافية على 60 ٪ في المتصفح غير LE*/
العرض: لا شيء ؛ / * //www.vevb.com */
z-index: 2 ؛}
#HideBox {position: Absolute ؛ العرض: 400px ؛ الارتفاع: 300px ؛ الأعلى: 200px ؛ اليسار: 30 ٪ ؛ خلفية اللون: #ffff ؛ العرض: لا شيء ؛ مؤشر: z-index: 3 ؛}
#content {text-align: center ؛ cursor: pointer ؛ z-index: 1 ؛}
</style>
</head>
<body>
<div id = "hidebg"> </viv>
<div id = "hidebox" onClick = "Hide () ؛"> انقر للإغلاق </div>
<div id = "content" onClick = "show () ؛"> انقر لمحاولة </div>
</body>
</html>