CSS + JavaScript
Principe de mise en œuvre:
Créez un div plein écran, en utilisant un positionnement absolu, afin qu'il puisse être séparé du flux de documents, sans affecter d'autres éléments, et le définir à un état translucide. Bien sûr, cette transparence peut être ajustée à volonté, et créer un élément de connexion, qui utilise également le positionnement absolu et rend sa valeur d'attribut Z-Index supérieure à la div sur l'écran, et en ce moment elle ne sera pas couverte par la div à écran complet. Dans l'état par défaut, la valeur d'attribut d'affichage de ces deux divs n'est aucune. Lorsque vous cliquez sur le bouton correspondant, ils peuvent modifier leur valeur d'attribut d'affichage.
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <meta name = "auteur" contenu = "// www.vevb.com/" /> <itle> comment faire exploser un masque transparent gris-black complet effect-wulin.com </ / title> <style type = "text / css"> * {margin: 0px; rembourrage: 0px; } .zhezhao {largeur: 100%; hauteur: 100%; Color d'arrière-plan: # 000; filtre: alpha (opacité = 50); -moz-opacité: 0,5; Opacité: 0,5; Position: absolue; gauche: 0px; En haut: 0px; Affichage: aucun; Z-Index: 1000; } .login {largeur: 280px; hauteur: 180px; Position: absolue; en haut: 200px; Gauche: 50%; Color d'arrière-plan: # 000; marge-gauche: -140px; Affichage: aucun; Z-Index: 1500; } .Content {margin-top: 50px; Couleur: rouge; Heure de ligne: 200px; hauteur: 200px; Texte-aligne: Centre; } </ style> <script type = "text / javascript"> window.onload = function () {var zhezhao = document.getElementyid ("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 = "bloc"; } btclose.onclick = function () {zhezhao.style.display = "Aucun"; login.style.display = "Aucun"; }} </ script> </ head> <body> <div id = "zhezhao"> </ div> <div id = "Login"> <Button id = "btclose"> Cliquez pour fermer </futton> </ div> <div> wulin.com vous accueille, </ Button id = "bt"> Cliquez pour faire pop up up up </siton> </v> </gody> </body> </html>Ce qui précède implémente la fonction de masque de base. En cliquant pour faire apparaître le masque, un objet apparaîtra. En cliquant pour fermer, l'effet de masque disparaîtra.
Pur javascript:
Effet d'implémentation: Lorsqu'une fenêtre apparaît, la page derrière la fenêtre devient sombre et ne peut pas être utilisée.
Difficulté: Parce que la couche Div ne peut pas couvrir le contrôle de sélection, il existe deux méthodes spéciales: l'une consiste à ajouter un iframe sous la fenêtre contextuelle pour couvrir le Select; La seconde consiste à masquer le contrôle de sélection lors de la fenêtre contextuelle et à choisir la deuxième méthode ici.
Principe d'implémentation: ajoutez une couche translucide sur la page et le milieu de la fenêtre contextuelle pour écraser le contenu de la page.
Code:
<Script Language = "JavaScript"> Fonction Open () {// Masquer le Control DisplaySelect (0); // Afficher Mask Layer Document.getElementById ("DivpageMask"). Style.display = "Block"; // entraîner la couche de masque ResizeMask (); window.onresize = resizEmask; // montre un document pop-up.getElementById ("divOpenwin"). Style.display = "block"; } fonction close () {// afficher la sélection de contrôle affichageSelect (1); // Traitement Mask Couche DivpageMask.Style.Width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "Aucun"; window.onresize = null; document.getElementById ("divOpenwin"). Style.display = "Aucun"; } // 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); } fonction displaySelect (Val) {// affiche et masque le Control Var displayType de sélection; var arrdispalytype = ["caché", "visible"]; var arrobjselect = document.getElementsByTagName ("SELECT"); pour (i = 0; i <arrobjselect.length; i ++) {arrobjselect [i] .style.visibilité = arrdispalytype [val]; }} </ script> <style type = "text / css"> .body, td {font-size: 12px} #divpagemask {background-Color: white; Filtre: alpha (opacité = 50); gauche: 0px; position: absolu; en haut: 0px;} #divopenwin {background-Color: #eeeeee; position: Absolute; Left: 0px; top: 0px; affichage: non; z-index: 50; width:300px;height:150px} </style> <div id="divPageMask"></div> <div id="divOpenWin"><center><a href="javascript:Close();">Close</a></center></div> <label></label> <center> <table cellpadding="0" cellpacing="0"> <tbody> <tr> <td Colspan = "2" align = "Center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </ td> </p> <Tr> <Tmord Style = "Color: # 666666; Font-Size: 13px"> </td> </tr> </tbody> </s table> <table bgcolor = "# e1e1e1" cellpadding = "0" cellpacing = "1"> <tbody> <tr> <td align = "Center" bgColor = "# # f9f9f9"> <table CellPadding = 0 width = 600 style = "margin-top: 20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> Mots-clés: </ td> <td> <td type = "Text" name = "k" size = 30 /> </ td> width = 101> Location: </ td> <td align = middle width = 97 id = "cn"> <script linguisse = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?cityName=beijing"> </prip> </td> <td align = middle width = 95> Value = "Search Shop"> </td> </tr> </ form> <tr> <td> </td> <td colspan = "4" valign = "middle"> Par exemple: restaurant; appareils; Supermarket </ Table> </td> </tr> </ tbody> </s table> </s table> </s table> </s table CellPadding = "0" Cellpacing = "0"> <tbody> <! - <tr> <td align = "Center" background = "images / index / line_2.gif"> <img src = "images / index / line_2.gif"> </ td> </ tr> -> <tr> <td align = "Center"> <a href = "# #" Target = _blank> color = "# ff6600"> Promotion de la boutique </a> | <a href = "#"> À propos de la boutique </a> | <a class = b href = "#" cible = _blank> Cooperation commerciale </a> | <a onclick = "this.style.behavior = 'url (# par défaut # homepage)'; this.sethomePage ('http://www.sopull.com'); return false;" href = "http://www.sopull.com/#"> Définir comme page d'accueil </a> | <a onclick = "javascript: window.external.addfavorite ('http://www.sopull.com/' ,'soupu.com le plus grand moteur de recherche de magasin')" href = "http://www.sopull.com/#"> Ajouter à favori Soupu.com Guangdong ICP n ° 07006767 </td> </tr> </tbody> </ table>