نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html>
<head>
<title> وثيقة جديدة </title>
<meta charset = "utf-8">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/>
<meta name = "المؤلف" content = "">
<meta name = "الكلمات الرئيسية" content = "">
<meta name = "الوصف" content = "">
<type type = "text/css">
*
{
الحشو: 0px ؛
الهامش: 0px ؛
}
#idiv
{
العرض: 900 بكسل ؛
الارتفاع: السيارات ؛
الموقف: مطلق ؛
Z-Index: 1000 ؛
الحدود: 2px الصلبة #ffffff ؛
الخلفية: #ffffff ؛
}
</style>
</head>
<body>
<div id = "idiv" style = "display: none ؛">
<a href = "javaScript: void (0)" onClick = "leariv ()"> انقر لإغلاق الطبقة </a>
<br/> الاختلافات في المستند.
</div>
<viv> <a href = "javaScript: void (0)" id = "show" onClick = "show ()"> انقر لفتح الطبقة المنبثقة! </div>
</body>
<script langue = "javaScript">
عرض الوظيفة ()
{
var idiv = document.getElementById ("idiv") ؛
idiv.style.display = "block" ؛
// يجب أن تتمحور الأجزاء التالية لعرض الطبقة المنبثقة
idiv.style.left = (document.documentElement.clientwidth-idiv.clientwidth)/2+document.documentElement.scrollleft+ "px" ؛
//alert(document.body.scrolltop)
var aa_scrolltop = document.documentElement.scrolltop || window.pageyoffset || document.body.scrolltop ؛
idiv.style.top = (document.documentElement.clientheight-Idiv.Clientheight)/2+aa_scrolltop+"px" ؛
// هناك مشكلة هنا. تتركز الطبقة المنبثقة إلى اليسار واليمين ، لكن الارتفاع غير متمركز ، ويتم عرضه في الجزء العلوي ، مما تسبب في أن يكون جزء واحد // غير مرئي. لذلك أضف هامشا أعلى مؤقتا أدناه.
// الأجزاء التالية تجعل الصفحة بأكملها رمادي فوق نقرة
var procbg = document.createElement ("div") ؛ // إنشاء Div أولاً
procbg.setattribute ("id" ، "mybg") ؛ // تحديد معرف Div
procbg.style.background = "#000000" ؛
procbg.style.width = "100 ٪" ؛
procbg.style.height = "100 ٪" ؛
procbg.style.position = "ثابت" ؛
procbg.style.top = "0" ؛
procbg.style.left = "0" ؛
procbg.style.zindex = "500" ؛
procbg.style.opacity = "0.6" ؛
procbg.style.filter = "alpha (عتامة = 70)" ؛
// إلغاء شريط التمرير
document.body.appendchild (procbg) ؛
document.body.style.overflow = "auto" ؛
// يدرك الأجزاء التالية تأثير السحب للطبقة المنبثقة (إذا كنت ترغب في تحريك DIV في الطبقة المنبثقة ، ما عليك سوى تسجيل الخروج وإزالة ما يلي)
/*
var posx ؛
var posy
idiv.onmousedown = وظيفة (هـ)
{
if (! e) e = window.event ؛ //أي
posx = e.clientx - parseint (idiv.style.left) ؛
posy = e.clienty - parseint (idiv.style.top) ؛
document.onmousemove = mousemove ؛
}
document.onmouseup = function ()
{
document.onmousemove = null ؛
}
وظيفة mousemove (EV)
{
إذا (ev == null) ev = window.event ؛ // ie
idiv.style.left = (ev.clientx - posx) +"px" ؛
idiv.style.top = (ev.clienty - posy) +"px" ؛
}*/
}
وظيفة مغلقة () // أغلق الطبقة المنبثقة
{
var idiv = document.getElementById ("idiv") ؛
var mybg = document.getElementById ("mybg") ؛
document.body.removechild (mybg) ؛
idiv.style.display = "none" ؛
document.body.style.overflow = "Auto" ؛ // استعادة صفحة Scrollbar
//document.getElementById("mybg").style.display="none "؛
}
</script>
</html>
// قم بتغيير الطبقة المنبثقة أعلاه وجعل وظيفة التحميل الخاصة بك. حدد ما إذا كانت الصفحة قد تم تحميلها ، وإخفاء التحميل.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> وثيقة جديدة </title>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
</head>
<body onload = "subsomething ()">
</body>
<script type = "text/ecmascript">
عرض الوظيفة (addressImg ، IMG_W ، IMG_H) {
// احصل على ارتفاع الصفحة
var h = (document.documentElement.clientheight> document.documentElement.clientheight)؟ document.documentElement.scrollheight: document.documentElement.clientheight ؛
// احصل على عرض الصفحة
var w = (document.documentElement.scrollwidth> document.documentElement.clientwidth)؟ document.documentElement.scrollwidth: document.documentElement.scrollwidth ؛
var procbg = document.createElement ("div") ؛ // إنشاء Div أولاً
procbg.setattribute ("id" ، "mybg") ؛ // تحديد معرف Div
procbg.style.background = "#555" ؛
procbg.style.width = "100 ٪" ؛
procbg.style.height = "100 ٪" ؛
procbg.style.position = "ثابت" ؛
procbg.style.top = "0" ؛
procbg.style.left = "0" ؛
procbg.style.zindex = "500" ؛
procbg.style.opacity = "0.6" ؛
procbg.style.filter = "alpha (عتامة = 70)" ؛
// إلغاء شريط التمرير
document.body.appendchild (procbg) ؛
document.body.style.overflow = "auto" ؛
var pimg = document.createElement ("img") ؛ // إنشاء IMG
pimg.setattribute ("id" ، "bg_img") ؛ // تحديد معرف Div
pimg.setattribute ("src" ، addressImg) ؛ // تحديد معرف Div
var img_w = (w - img_w) / 2 ؛
var img_h = (h - img_h) / 2 ؛
pimg.style.top = img_h + "px" ؛
pimg.style.left = img_w + "px" ؛
pimg.style.position = "ثابت" ؛
pimg.style.Opacity = "0.9" ؛
document.getElementById ("mybg"). appendChild (PIMG) ؛
}
وظيفة مغلقة () // أغلق الطبقة المنبثقة
{
var mybg = document.getElementById ("mybg") ؛
document.body.removechild (mybg) ؛
document.body.style.overflow = "Auto" ؛ // استعادة صفحة Scrollbar
//document.getElementById("mybg").style.display="none "؛
}
show ('loading/loading3.gif' ، '100' ، '100') ؛
document.OnReadyStateChange = subsomething ؛ // تنفيذ هذه الطريقة عند تغيير حالة تحميل الصفحة.
وظيفة subsomething () {
if (document.readyState == "كاملة") {// أدخل عندما تنتهي حالة تحميل الصفحة بالكامل
مغلق () ؛
}
}
</script>
</html>