CSS+JavaScript
مبدأ التنفيذ:
قم بإنشاء Div على شاشة كاملة ، باستخدام تحديد المواقع المطلقة ، بحيث يمكن فصله عن دفق المستندات ، دون التأثير على العناصر الأخرى ، وتعيينه على حالة شفافة. بالطبع ، يمكن تعديل هذه الشفافية حسب الرغبة ، وإنشاء عنصر تسجيل دخول ، والذي يستخدم أيضًا تحديد المواقع المطلقة ويجعل قيمة سمة Z-Index أكبر من DIV على الشاشة ، وفي هذا الوقت لن تتم تغطيتها بواسطة DIV على الشاشة كاملة. في الحالة الافتراضية ، فإن قيمة سمة العرض لهاتين divs هي لا شيء. عند النقر فوق الزر المقابل ، يمكنهم تغيير قيمة سمة العرض الخاصة بهم.
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "uputh" content = "// www.vevb.com/"/> <title> كيفية الظهور على شكل أخطاء شفافة رمادية اللون اللون الرمادي الكامل. الحشو: 0px ؛ } .zhezhao {العرض: 100 ٪ ؛ الارتفاع: 100 ٪ خلفية اللون:#000 ؛ مرشح: ألفا (عتامة = 50) ؛ -الموز سعة: 0.5 ؛ العتامة: 0.5 ؛ الموقف: مطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ العرض: لا شيء ؛ Z-Index: 1000 ؛ } .login {width: 280px ؛ الارتفاع: 180 بكسل ؛ الموقف: مطلق ؛ أعلى: 200 بكسل ؛ اليسار: 50 ٪ ؛ خلفية اللون:#000 ؛ الهامش اليساري: -140 بكسل ؛ العرض: لا شيء ؛ Z-Index: 1500 ؛ } .Content {margin-top: 50px ؛ اللون: أحمر. ارتفاع الخط: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ محاذاة النص: المركز ؛ } </style> <script type = "text/javaScript"> window.onload = function () {var zhezhao = document.getElementById ("zhezhao") ؛ var login = document.getElementById ("login") ؛ var bt = document.getElementById ("bt") ؛ var btclose = document.getElementById ("btclose") ؛ bt.onclick = function () {zhezhao.style.display = "block" ؛ login.style.display = "block" ؛ } btclose.onclick = function () {zhezhao.style.display = "none" ؛ login.style.display = "none" ؛ }} </script> </head> <body> <div id = "zhezhao"> </viv> <div id = "login"> <button id = "btclose"> انقر للإغلاق </button> </viv> <viv> wulin.com يرحب بك ، <button id = "bt"ما سبق ينفذ وظيفة القناع الأساسية. عند النقر على الظهور بالقمامة ، سيظهر الكائن. عند النقر للإغلاق ، سيختفي تأثير القناع.
جافا سكريبت النقي:
تأثير التنفيذ: عندما تنبثق نافذة ، تصبح الصفحة خلف النافذة مظلمة ولا يمكن تشغيلها.
الصعوبة: نظرًا لأن طبقة DIV لا يمكن تغطية التحكم في تحديد ، هناك طريقتان خاصتان: أحدهما لإضافة iFrame أسفل النافذة المنبثقة لتغطية Select ؛ والثاني هو إخفاء التحكم في تحديد المنبثقة ، واختيار الطريقة الثانية هنا.
مبدأ التنفيذ: أضف طبقة شفافة على الصفحة ووسط النافذة المنبثقة للكتابة فوق محتوى الصفحة.
شفرة:
<script language = "javaScript"> function open () {// إخفاء Control Control Displayelect (0) ؛ // show mask layer document.getElementById ("divpagemask"). style.display = "block" ؛ // قم بتدريب Resizemask Mask Layer () ؛ window.onresize = resizemask ؛ // show pop-up document.getElementById ("divopenwin"). style.display = "block" ؛ } دالة Close () {// show select control displayelect (1) ؛ // معالجة قناع الطبقة divpagemask.style.width = "0px" ؛ divpagemask.style.height = "0px" ؛ divopenwin.style.display = "none" ؛ window.onresize = null ؛ document.getElementById ("divopenwin"). style.display = "none" ؛ } // 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) ؛ } دالة shiewlect (val) {// إظهار وإخفاء Control Control var displaytype ؛ var arrdispalytype = ["Hidden" ، "Visible"] ؛ var atrobjselect = document.getElementsByTagName ("SELECT") ؛ لـ (i = 0 ؛ i <arrobjselect.length ؛ i ++) {arrobjselect [i] .style.visibility = arrdispalytype [val] ؛ }} </script> <style type = "text/css"> .body ، td {font-size: 12px} #divpagemask {background-color: white ؛ مرشح: ألفا (عتامة = 50) ؛ اليسار: 0px ؛ الموضع: المطلق ؛ أعلى: 0px ؛} #divopenwin {خلفية اللون: #Eeeeee ؛ الموضع: المطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ عرض: none ؛ z-index: 50 ؛ العرض: 300px ؛ الارتفاع: 150px} </style> <div id = "divpageMask"> </viv> <div id = "divopenwin"> <center> <a href = "javaScript: elation () <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </ p> style = "color:#666666 ؛ font-size: 13px"> </td> </tbor> </tbody> </table> <table bgcolor = "#e1e1e1" cellpadding = "0" cellpacing = "1" cellpadding = 0 width = 600 style = "margin-top: 20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> الكلمات الرئيسية: </td> <td> <twor العرض = 101> الموقع: </td> <td align = middle width = 97 id = "cn"> <script language = "javaScript" src = "http://www.sopull.com/ininc/js/listcity.asp؟cityname=beijing اكتب = إرسال value = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "middle"> على سبيل المثال: مطعم ؛ الأجهزة سوبر ماركت </table> </td> </tbody> </table> </table> </table> </tتم cellpadding = "0" cellpacing = "0"> <tbody> <!-<tr> <td align = "center" background = "Images/index/line_2.gif"> <img src = "images/index/line_2.gif"> </td> </td>-> <td align = "center"> 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') ؛ إرجاع خطأ ؛" HREF = "http://www.sopull.com/#"> تعيين كصفحة منزلية </a> | <a onclick = "javaScript: window.external.addfavorite ('http://www.sopull.com/'،soupu.com-china's أكبر محرك بحث متجر') Soupu.com Guangdong ICP No.