CSS+JavaScript
Princípio de implementação:
Crie uma divisão em tela cheia, usando o posicionamento absoluto, para que possa ser separado do fluxo de documentos, sem afetar outros elementos, e defina-o como um estado translúcido. Obviamente, essa transparência pode ser ajustada à vontade e criar um elemento de login, que também usa posicionamento absoluto e torna seu valor de atributo Z-Index maior que a div na tela e, neste momento, não será coberta pelo div. No estado padrão, o valor do atributo de exibição desses dois divs é nenhum. Ao clicar no botão correspondente, eles podem alterar o valor do atributo de exibição.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "autor" content = "// www.vevb.com/"/> <title> Como aparecer um transparente cinza-escrez escrel-screen e efeito de máscara-wulin.com </title> <estilo = "Text/cs/cs preenchimento: 0px; } .zhezhao {width: 100%; Altura: 100%; Background-Color:#000; filtro: alfa (opacidade = 50); -Moz-Opacity: 0,5; Opacidade: 0,5; Posição: Absoluto; Esquerda: 0px; Top: 0px; Exibir: Nenhum; Z-Index: 1000; } .Login {Width: 280px; Altura: 180px; Posição: Absoluto; TOP: 200px; Esquerda: 50%; Background-Color:#000; margem-esquerda: -140px; Exibir: Nenhum; Index z: 1500; } .Content {margin-top: 50px; Cor: vermelho; altura de linha: 200px; Altura: 200px; Alinhamento de texto: centro; } </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 = "bloqueio"; login.style.display = "bloco"; } btclose.OnClick = function () {zhezhao.style.display = "nenhum"; login.style.display = "nenhum"; }} </script> </ad Head> <body> <div id = "zhezhao"> </div> <div id = "login"> <botão id = "btclose"> clique para fechar </button> </div> </buttão> wulin.com as boasO acima implementa a função básica da máscara. Ao clicar para aparecer a máscara, um objeto será exibido. Ao clicar para fechar, o efeito da máscara desaparecerá.
JavaScript puro:
Efeito de implementação: Quando uma janela aparece, a página atrás da janela fica escura e não pode ser operada.
Dificuldade: como a camada div não pode cobrir o controle de seleção, existem dois métodos especiais: um é adicionar um iframe abaixo da janela pop-up para cobrir a seleção; O segundo é ocultar o controle de seleção ao pop-up e escolher o segundo método aqui.
Princípio da implementação: adicione uma camada translúcida na página e no meio da janela pop-up para substituir o conteúdo da página.
Código:
<script linguage = "javascript"> function Open () {// Ocultar o controle Select Control DisplaySelect (0); // Mostrar documento de camada de máscara. // Treine a camada de máscara reszizemask (); window.onResize = ResrizEMask; // Mostrar documento pop-up.getElementById ("Divopenwin"). Style.display = "bloco"; } function close () {// Mostrar selecione Control DisplaySelect (1); // Camada de máscara de processamento DivpageMask.style.width = "0px"; divpageMask.style.Height = "0px"; Divopenwin.style.display = "nenhum"; window.onResize = null; document.getElementById ("Divopenwin"). style.display = "nenhum"; } // Função de máscara de página ResizEMask () {divpageMask.style.width = document.body.scrollwidth; divpageMask.style.Height = document.body.scrolHeight; Divopenwin.style.left = ((document.body.offsetWidth - Divopenwin.offsetWidth) / 2); Divopenwin.style.top = ((document.body.offsetHeight - Divopenwin.offsetHeight) / 2); } função DisplaysElect (val) {// Mostrar e ocultar o controle de controle var displayPe; var ArrDispalyType = ["Hidden", "Visible"]; var ArrobjSelect = document.getElementsByTagName ("select"); for (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; filtro: alfa (opacidade = 50); esquerda: 0px; posição: absoluto; topo: 0px;} #divopenwin {background-color: #eeeeee; posição: absoluto; esquerda: 0px; topo: 0px; exibição: nenhum: z-index: 50; largura: 300px; altura: 150px} </style> <div id = "divpagemask"> </div> <div id = "Divopenwin"> <Center> <a href = "javascript: close ();"> fecha </a> </center> </div> <bel> </center> <bent> <table); <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> style = "cor:#666666; tamanho da fonte: 13px"> </td> </tr> </tbody> </itlast> <tabela bgcolor = "#e1e1e1" celularpadding = "0" CellPacing = "1"> <Tbody> <tr> <td align = "center" bgcolor = "1"> <Tbody> <tr> <td align = "center" BGColor = CellPadding = 0 largura = 600 style = "margin-top: 20px"> <nome name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> Keywords: </td> <t> <input> type = "text" "" K "Nome = (TD> <TD> <TD> <TD> <TD> <TD> <td> Keywords: </td> <t> <input) largura = 101> Localização: </td> <td align = largura média = 97 id = "cn"> <script linguagem = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?name=beijing"> </script> TIPO = Valor de envio = "Pesquisa"> </td> </tr> </morm> <tr> <td> </td> <td colspan = "4" valign = "Middle"> por exemplo: Restaurant; aparelhos; Supermarket </tabela> </td> </tr> </tbody> </ table> </tabela> </tabela> </tabela> </central> <p align = "central"> </p> <p align = "Center"> <a href = "javascript: Open ();"> CellPadding = "0" CellPacing = "0"> <Tbody> <!-<tr> <td align = "Center" Background = "Images/Index/Line_2.gif"> <img src = "Images/index/line_2.gif"> </td> </tric> <tr> <tigl = "Center"> <a hre (/td> </trd> <tr> <tigl = "center"> <a "</hre =" </td> </td "<t) <t) <blank_2.gif"> </td> </tr> <tr> <tigl = "center"> <a hre hre = </td> </trc <tr> <tignank) color = "#ff6600"> promoção da loja </a> | <a href = "#"> Sobre a loja </a> | <a class = b href = "#" Target = _blank> Cooperação comercial </a> | <a onclick = "this.style.behavior = 'url (#padrão#homepage)'; this.SethomePage ('http://www.sopull.com'); retorna false;" href = "http://www.sopull.com/#"> definido como página inicial </a> | <a onclick = "javascript: window.external.addfavorite ('http://www.sopull.com/'.'soupu.com-hina's maior mecanismo de pesquisa de loja')" href = "http://ww.sopull.com/#) <binga> </aa> Sopa.com Guangdong ICP No. 07006767 </td> </tr> </tbody> </ table>