บทความนี้อธิบายถึงวิธีการใช้เฟรมป๊อปอัพเลเยอร์หน้ากากโดย 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 ของทุกคน