วิธีใช้กล่องป๊อปอัพมาสก์เลเยอร์เลเยอร์

บทความนี้อธิบายถึงวิธีการใช้เฟรมป๊อปอัพเลเยอร์หน้ากากโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:

เมื่อวานนี้เว็บไซต์ บริษัท ต้องการหน้าต่างป๊อปอัพเพื่อแจ้งข้อมูลบางอย่างและขอให้ฉันเขียนรหัสป๊อปอัพ JS และหน้าต่างป๊อปอัพ HTML ด้วยกันเพียงแค่เรียกมันว่าทุกที่ที่คุณต้องการ

ฉันจะไม่พูดมากแค่อัปโหลดรหัสและฉันรู้สึกว่าจะมีปัญหาความเข้ากันได้อย่างแน่นอน กรุณาชี้ให้เห็นถ้าคุณเห็น:

คัดลอกรหัสดังนี้: <style>

#h-dialog {display: none; ตำแหน่ง: สัมบูรณ์; z-index: 999999; ความกว้าง: 400px; ความสูง: auto; พื้นหลังสี: #FFF;}

#h-dialog .close {float: ขวา; font-size: 30px; margin-right: 10px; margin-top: 5px; Cursor: Pointer;}

#h-dialog .title {ความสูง: 40px; padding-left: 10px; ขนาดตัวอักษร: 20px; สายไฟ: 40px;}

#h-dialog #msgcont {ความสูง: 36px; มาร์จิ้น: 30px 0 50px; Padding-Left: 65px; Font-Size: 25px; Line-Height: 36px; แนวตั้ง-แนวตั้ง: กลาง; ความเป็นมา: url (../ images/ui_alert.png) ไม่มีการทำซ้ำ 20px 50%;}

</style>

<div id = "h-dialog">

<a onclick = "popupclose (this)"> × </a>

<div> เคล็ดลับ </div>

<div id = "msgcont"> เนื้อหา </div>

</div>

<script type = "text/javascript">

// ล็อคหน้าจอพื้นหลัง

ฟังก์ชั่น lockscreen () {

var clienth = document.body.offsetheight; // ความสูงของร่างกาย

var clientw = document.body.offsetWidth; // ความกว้างของร่างกาย

var doch = document.body.scrollheight; // ความสูงของเบราว์เซอร์

var docw = document.body.scrollwidth; // ความกว้างของเบราว์เซอร์

var bgw = clientw> docw? ClientW: DOCW; // รับความกว้างที่ถูกต้อง

var bgh = clienth> doch? clienth: doch; // รับสูงที่ถูกต้อง

var blackbg = document.createelement ("div");

blackbg.id = "blackbg";

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

blackbg.style.zindex = "99999";

blackbg.style.top = "0";

blackbg.style.left = "0";

blackbg.style.width = bgw+"px";

blackbg.style.height = bgh+"px";

blackbg.style.Opacity = "0.4";

blackbg.style.backgroundColor = "#333";

document.body.appendchild (blackbg);

-

// ปิดปุ่มเหตุการณ์

ฟังก์ชั่น popupclose (el) {

var blackbg = document.getElementById ("blackbg");

blackbg && document.body.removechild (blackbg);

el.parentNode.style.display = "ไม่มี";

-

// ต้นกำเนิด

ฟังก์ชั่น autoclose (id) {

id = id || "H-Dialog";

var blackbg = document.getElementById ("blackbg");

var objdiv = document.getElementById (id);

settimeout (function () {

blackbg && document.body.removechild (blackbg);

objdiv.style.display = "ไม่มี";

}, 2000);

-

-

*ฟังก์ชั่น: ข้อมูลป๊อปอัพ

* พารามิเตอร์ 1: เนื้อหาข้อมูลพรอมต์

* พารามิเตอร์ 2: สถานะข้อมูลพรอมต์เริ่มต้นคือ 0 ข้อมูลแจ้งคือ 1 ข้อมูลความสำเร็จคือ

* พารามิเตอร์ 3: ID ของป๊อปอัพ div, ค่าเริ่มต้น "H-dialog"

* พารามิเตอร์ 4: ID ของเนื้อหาหน้าต่างป๊อปอัพ, ค่าเริ่มต้น "msgcont"

-

ฟังก์ชั่น showmsg (msg) {

msg = msg || "โปรดเปิดใหม่";

สถานะ var = อาร์กิวเมนต์ [1] || 0,

popupid = อาร์กิวเมนต์ [2] || "H-Dialog",

contentId = อาร์กิวเมนต์ [3] || "msgcont";

Lockscreen ();

// ความสูงและความกว้างที่แท้จริงของหน้าจอ

var pagewidth = window.innerWidth;

var pageHeight = window.innerHeight;

if (typeof pagewidth! = "number") {

if (document.CompatMode == "CSS1COMPAT") {

pagewidth = document.documentElement.ClientWidth;

pageHeight = document.documentelement.clientheight;

} อื่น {

pagewidth = document.body.clientwidth;

pageHeight = document.body.clientheight;

-

-

// แถบเลื่อนมีความสูงและความกว้าง

var scrollleft = window.document.documentelement.scrollleft;

var scrolltop = 0;

if (typeof window.pageyoffset! = 'undefined') {

scrolltop = window.pageyoffset;

} อื่นถ้า (typeof window.document.CompatMode! = 'undefined' &&

window.document.CompatMode! = 'backCompat') {

scrolltop = window.document.documentelement.scrolltop;

} อื่นถ้า (typeof window.document.body! = 'undefined') {

scrolltop = window.document.body.scrolltop;

-

var div_x = (pagewidth - 400) / 2 + scrollleft;

var div_y = (pageheight - 200) / 2 + scrolltop;

var objdiv = document.getElementById (popupid);

ถ้า (สถานะ) {

document.getElementById (contentId) .style.background = "url ($ root/assets/images/ui_success.png) ไม่ต้องทำซ้ำ 20px 50%";

-

document.getElementById (contentId) .innerhtml = msg;

objdiv.style.display = "block";

objdiv.style.left = div_x + "px";

objdiv.style.top = div_y + "px";

หมิ่นประมาท (popupid);

-

</script>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน