พื้นหลังของเลเยอร์ป๊อปอัปที่ใช้งานโดยจาวาสคริปต์นั้นเป็นสีเทา - การจำลอง (กล่องโต้ตอบ easyui)

หน้านี้ค่อนข้างน่าเกลียดและมีการใช้งานเฉพาะฟังก์ชันเท่านั้น -

คัดลอกรหัสรหัสดังต่อไปนี้:

<title>เลียนแบบเอฟเฟกต์ของกล่องโต้ตอบ easyui</title>

<สคริปต์>

//รับองค์ประกอบของหน้า

var getElement = ฟังก์ชั่น () {

return document.getElementById (อาร์กิวเมนต์ [0]) ||. false;

-

ฟังก์ชั่น openDialog (dialogId) {

var maskId = "มาสก์";

//ถ้ามีให้ลบอันเดิมออกก่อน

ถ้า (getElement (dialogId)) {

document.removeChild(getElement(dialogId));//ลบการดำเนินการ: div ป๊อปอัป

-

ถ้า (getElement(maskId)) {

document.removeChild(getElement(maskId));//การดำเนินการลบ: เลเยอร์ป๊อปอัปที่ใช้งานไม่ได้ (มาสก์)

-

//พื้นหลังเป็นสีเทา

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

maskDiv.id = รหัสหน้ากาก;

maskDiv.style.position = "สัมบูรณ์";

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.พื้นหลัง = "สีเทา";

maskDiv.style.filter = "อัลฟ่า(ความทึบ=10)";

maskDiv.style.opacity = "0.30";//ความโปร่งใส

document.body.appendChild(maskDiv);//เพิ่มเลเยอร์พื้นหลังให้กับเนื้อหา

// กล่องโต้ตอบ

varกล่องโต้ตอบDiv = document.createElement("div");

DialogDiv.id = DialogId;

dialDiv.style.position = "สัมบูรณ์";

DialogDiv.style.zIndex = "9999";

DialogDiv.style.width = "400px";

DialogDiv.style.height = "200px";

DialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px"; // จัดกึ่งกลางหน้าจอ

dialDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px"; // จัดกึ่งกลางหน้าจอ

ไดอะล็อกDiv.style.พื้นหลัง = "สีขาว";

DialogDiv.style.border = "1px สีเทาทึบ";

DialogDiv.style.padding = "5px";

dialDiv.innerHTML = "(เนื้อหากล่องโต้ตอบ)";

//ปิดการดำเนินการใน Dialog: ปิดเลเยอร์พื้นหลังและเลเยอร์ Dialog

var closeControlloer = document.createElement("a");//สร้างไฮเปอร์ลิงก์ (เป็นตัวกระตุ้นในการปิด)

closeControlloer.href = "#";

closeControlloer.innerHTML = "ปิด";

closeControlloer.onclick = ฟังก์ชั่น () {

document.body.removeChild(getElement(dialogId));//ลบไดอะล็อก

document.body.removeChild(getElement(maskId));//ลบเลเยอร์พื้นหลังออก

-

DialogDiv.appendChild(closeControlloer);//เพิ่มการดำเนินการ "ปิด" ลงในกล่องโต้ตอบ

document.body.appendChild(dialogDiv);//เพิ่มกล่องโต้ตอบให้กับเนื้อหา

-

</สคริปต์>

<a href="#" onclick="openDialog('dialog');">เปิดกล่องโต้ตอบ</a>