CSS+JavaScript
หลักการดำเนินการ:
สร้าง DIV แบบเต็มหน้าจอโดยใช้การวางตำแหน่งสัมบูรณ์เพื่อให้สามารถแยกออกจากสตรีมเอกสารโดยไม่ส่งผลกระทบต่อองค์ประกอบอื่น ๆ และตั้งเป็นสถานะโปร่งแสง แน่นอนความโปร่งใสนี้สามารถปรับได้ตามความประสงค์และสร้างองค์ประกอบการเข้าสู่ระบบซึ่งยังใช้การวางตำแหน่งสัมบูรณ์และทำให้ค่าแอตทริบิวต์ Z-index ของมันมากกว่า DIV บนหน้าจอและในเวลานี้มันจะไม่ได้รับการคุ้มครองโดย Div แบบเต็มหน้าจอ ในสถานะเริ่มต้นค่าแอตทริบิวต์การแสดงผลของสอง divs นี้ไม่มี เมื่อคลิกปุ่มที่เกี่ยวข้องพวกเขาสามารถเปลี่ยนค่าแอตทริบิวต์การแสดงผลได้
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "ผู้แต่ง" content = "// www.vevb.com/"/> <title> วิธีการปรากฏตัวเต็มรูปแบบเต็มรูปแบบ Padding: 0px; }. Zhezhao {Width: 100%; ความสูง: 100%; พื้นหลังสี:#000; ตัวกรอง: อัลฟ่า (ความทึบ = 50); -moz-opacity: 0.5; ความทึบ: 0.5; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; แสดง: ไม่มี; z-index: 1,000; } .login {Width: 280px; ความสูง: 180px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 200px; ซ้าย: 50%; พื้นหลังสี:#000; ขอบซ้าย: -140px; แสดง: ไม่มี; z-index: 1500; } .Content {margin-top: 50px; สี: สีแดง; ความสูงบรรทัด: 200px; ความสูง: 200px; TEXT-ALIGN: CENTER; } </style> <script type = "text/javascript"> window.onload = function () {var zhezhao = document.getElementById ("Zhezhao"); var login = document.getElementById ("เข้าสู่ระบบ"); var bt = document.getElementById ("bt"); var btclose = document.getElementById ("btclose"); bt.onclick = function () {zhezhao.style.display = "block"; เข้าสู่ระบบ style.display = "block"; } btclose.onclick = function () {zhezhao.style.display = "ไม่มี"; เข้าสู่ระบบ style.display = "ไม่มี"; }} </script> </head> <body> <div id = "zhezhao"> </div> <div id = "เข้าสู่ระบบ"> <button id = "btclose"> คลิกเพื่อปิด </button> </div> <div> wulin.com ยินดีต้อนรับคุณข้างต้นใช้ฟังก์ชั่นหน้ากากพื้นฐาน เมื่อคลิกเพื่อปรากฏตัวหน้ากากวัตถุจะปรากฏขึ้น เมื่อคลิกเพื่อปิดเอฟเฟกต์หน้ากากจะหายไป
จาวาสคริปต์บริสุทธิ์:
เอฟเฟกต์การใช้งาน: เมื่อหน้าต่างปรากฏขึ้นหน้าด้านหลังหน้าต่างจะมืดและไม่สามารถใช้งานได้
ความยาก: เนื่องจากเลเยอร์ DIV ไม่สามารถครอบคลุมการควบคุมการเลือกมีสองวิธีพิเศษ: หนึ่งคือการเพิ่ม iframe ด้านล่างหน้าต่างป๊อปอัพเพื่อครอบคลุมการเลือก; ประการที่สองคือซ่อนตัวควบคุมการเลือกเมื่อป๊อปอัพและเลือกวิธีที่สองที่นี่
หลักการการนำไปใช้: เพิ่มเลเยอร์โปร่งแสงบนหน้าและกลางหน้าต่างป๊อปอัปเพื่อเขียนทับเนื้อหาของหน้า
รหัส:
<script language = "JavaScript"> ฟังก์ชั่นเปิด () {// ซ่อนตัวเลือกการควบคุม displaySelect (0); // แสดง mask layer document.getElementById ("DivPagemask"). style.display = "block"; // ฝึกอบรม Layer Resizemask (); window.onresize = resizemask; // แสดง pop-up document.getElementById ("Divopenwin"). style.display = "block"; } ฟังก์ชั่นปิด () {// แสดงการเลือกตัวควบคุม displaySelect (1); // การประมวลผลเลเยอร์หน้ากาก divpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "ไม่มี"; window.onresize = null; document.getElementById ("divopenwin"). style.display = "ไม่มี"; } // page mask function resizemask () {divpagemask.style.width = document.body.scrollwidth; divpagemask.style.height = document.body.scrollheight; divopenwin.style.left = ((document.body.offsetWidth - divopenwin.offsetWidth) / 2); divopenwin.style.top = ((document.body.offsetheight - divopenwin.offsetheight) / 2); } ฟังก์ชั่น displaySelect (val) {// show และซ่อนตัวเลือกการควบคุม var displayType; var arrDispalyType = ["ซ่อน", "มองเห็นได้"]; var arrobjselect = document.getElementsByTagname ("เลือก"); สำหรับ (i = 0; i <arrobjselect.length; i ++) {arrobjselect [i] .style.visibility = arrdispalytype [val]; }} </script> <style type = "text/css"> .body, td {font-size: 12px} #divpagemask {พื้นหลัง-สี: สีขาว; ตัวกรอง: อัลฟ่า (ความทึบ = 50); ซ้าย: 0px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px;} #divopenwin {พื้นหลัง-สี: #eeeeee; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; ความกว้าง: 300px; ความสูง: 150px} </style> <div id = "divpagemask"> </div> <div id = "divopenwin"> <center> <a href = "JavaScript: ปิด (); <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> style = "color:#6666666; Font-Size: 13px"> </td> </tr> </tbody> </table> <ตาราง bgcolor = "#e1e1e1" cellpadding = "0" cellpacing = "1"> <tbody> <tr> cellpadding = 0 width = 600 style = "margin-top: 20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> คำหลัก: </td> <td> width = 101> ตำแหน่ง: </td> <td align = ความกว้างกลาง = 97 id = "cn"> <ภาษาสคริปต์ = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?cityName=beijing" value = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "กลาง"> ตัวอย่าง: ร้านอาหาร; เครื่องใช้ไฟฟ้า; Supermarket </table> </td> </tr> </tbody> </table> </table> </ster> </table> </enter> <p center = "center"> </p> <p allign = "center"> <a href = "javaScript: เปิด () cellpadding = "0" cellpacing = "0"> <tbody> <!-<tr> <td align = "center" พื้นหลัง = "ภาพ/ดัชนี/line_2.gif"> <img src = "images/line_2.gif"> </td> </tr>-> <tr> color = "#ff6600"> โปรโมชั่นร้านค้า </a> | <a href = "#"> เกี่ยวกับร้านค้า </a> | <a class = b href = "#" target = _blank> ความร่วมมือทางธุรกิจ </a> | <a onclick = "this.style.behavior = 'url (#เริ่มต้น#หน้าแรก)'; this.sethomepage ('http://www.sopull.com'); return;" href = "http://www.sopull.com/#"> ตั้งเป็นหน้าแรก </a> | <a onclick = "JavaScript: window.external.addfavorite ('http://www.sopull.com/'Soupu.com-china's Search Engine ร้านค้าที่ใหญ่ที่สุด')" href = "http://ww.sopull.com/#" Align = "Center"> © 2007 Soupu.com Guangdong ICP หมายเลข 07006767 </td> </tr> </tbody> </table>