خلفية الطبقة المنبثقة التي تنفذها جافا سكريبت باللون الرمادي - محاكاة (مربع حوار easyui)

الصفحة قبيحة نوعًا ما ويتم تنفيذ الوظائف فقط. ^ ^

انسخ رمز الكود كما يلي:

<title>تقليد تأثير مربع حوار easyui</title>

<النص البرمجي>

// احصل على عناصر الصفحة

فار getElement = function() {

return document.getElementById(arguments[0]) ||.

}

وظيفة openDialog(dialogId) {

var MaskId = "mask";

// إذا كان هناك واحد، فاحذف الأصل أولاً

إذا (getElement(dialogId)) {

document.removeChild(getElement(dialogId));// عملية الحذف: div المنبثقة

}

إذا (getElement(maskId)) {

document.removeChild(getElement(maskId));// عملية الحذف: طبقة (قناع) منبثقة غير قابلة للتشغيل

}

// الخلفية باللون الرمادي

var MaskDiv = document.createElement("div");

MaskDiv.id = MaskId;

MaskDiv.style.position = "absolute";

MaskDiv.style.zIndex = "1";

MaskDiv.style.width = document.body.scrollWidth + "px";

MaskDiv.style.height = document.body.scrollHeight + "px";

MaskDiv.style.top = "0px";

MaskDiv.style.left = "0px";

MaskDiv.style.background = "gray";

MaskDiv.style.filter = "alpha(opacity=10)";

MaskDiv.style.opacity = "0.30";//Transparency

document.body.appendChild(maskDiv);// أضف طبقة خلفية إلى الجسم

//حوار

varحوارDiv = document.createElement("div");

DialogDiv.id = DialogId;

DiagramDiv.style.position = "absolute";

DiagramDiv.style.zIndex = "9999";

DialoDiv.style.width = "400px";

DiagramDiv.style.height = "200px";

DiagramDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // توسيط الشاشة

حوارDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px";// توسيط الشاشة

DiagramDiv.style.background = "أبيض";

حوارDiv.style.border = "1 بكسل رمادي خالص";

DiagramDiv.style.padding = "5px";

DialogDiv.innerHTML = "(محتوى الحوار)";

// إغلاق العملية في الحوار: أغلق طبقة الخلفية وطبقة الحوار

var CloseControlloer = document.createElement("a");// أنشئ رابطًا تشعبيًا (كمحفز للإغلاق)

CloseControlloer.href = "#";

CloseControlloer.innerHTML = "إغلاق";

CloseControlloer.onclick = function() {

document.body.removeChild(getElement(dialogId));//حذف سجل الحوار

document.body.removeChild(getElement(maskId));// قم بإزالة طبقة الخلفية

}

DiagramDiv.appendChild(CloseControlloer);// أضف عملية "إغلاق" إلى مربع الحوار

document.body.appendChild(dialogDiv);// أضف مربع حوار إلى النص

}

</script>

<a href="#" onclick="openDialog('dialog');">فتح الحوار</a>