CSS+JavaScript
Principio de implementación:
Cree un DIV de pantalla completa, utilizando un posicionamiento absoluto, para que pueda separarse de la secuencia de documentos, sin afectar otros elementos, y establecerlo en un estado translúcido. Por supuesto, esta transparencia se puede ajustar a voluntad y crear un elemento de inicio de sesión, que también utiliza el posicionamiento absoluto y hace que su valor de atributo de índice Z sea mayor que el DIV en la pantalla, y en este momento no estará cubierto por el DIV de pantalla completa. En el estado predeterminado, el valor de atributo de visualización de estos dos divs es ninguno. Al hacer clic en el botón correspondiente, pueden cambiar su valor de atributo de visualización.
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <meta name = "autor" content = "// www.vevb.com/"/> <title> Cómo aparecer en un screen gray-black transparent mask effect-wulin.com </title> <style type = "text/css"> * {margen margen: 0px; relleno: 0px; } .zhezhao {ancho: 100%; Altura: 100%; Color de fondo:#000; Filtro: alfa (opacidad = 50); -Pacilidad de MOZ: 0.5; Opacidad: 0.5; Posición: Absoluto; Izquierda: 0px; arriba: 0px; Pantalla: ninguno; Índice Z: 1000; } .login {ancho: 280px; Altura: 180px; Posición: Absoluto; Arriba: 200px; Izquierda: 50%; Color de fondo:#000; margen-izquierda: -140px; Pantalla: ninguno; Índice Z: 1500; } .content {margin-top: 50px; Color: rojo; Línea de altura: 200px; Altura: 200px; Text-Align: Center; } </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 = "bloque"; login.style.display = "bloque"; } btclose.onClick = function () {zhezhao.style.display = "ninguno"; Login.style.display = "Ninguno"; }} </script> </head> <body> <div id = "zhezhao"> </div> <div id = "login"> <button id = "btClose"> Haga clic para cerrar </botón> </div> <div> wulin.com le acompaña, <button id = "bt"> haga clic en la máscara emergente </botón> </div> </body> </html>Lo anterior implementa la función de máscara básica. Al hacer clic para aparecer en la máscara, aparecerá un objeto. Al hacer clic para cerrar, el efecto de la máscara desaparecerá.
JavaScript puro:
Efecto de implementación: cuando aparece una ventana, la página detrás de la ventana se oscurece y no se puede operar.
Dificultad: Debido a que la capa DIV no puede cubrir el control Select, hay dos métodos especiales: uno es agregar un iframe debajo de la ventana emergente para cubrir la selección; El segundo es ocultar el control Seleccionar cuando se emite y elegir el segundo método aquí.
Principio de implementación: agregue una capa translúcida en la página y en el centro de la ventana emergente para sobrescribir el contenido de la página.
Código:
<script language = "javaScript"> function open () {// ocultar el control seleccionar DisplaySelect (0); // Mostrar el documento de la capa de máscara.getElementById ("DivPagEMask"). Style.display = "bloque"; // Entrenar la capa de máscara resizMask (); Window.onresize = resizMask; // mostrar documento emergente } function Close () {// show Seleccionar control DisplaySelect (1); // procesamiento de la capa de máscara divpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "ninguno"; window.onresize = null; document.getElementById ("divopenwin"). style.display = "none"; } // Función de máscara de página resizMask () {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); } función displayselect (val) {// Muestra y oculta el control de control de control var arrdispalytype = ["oculto", "visible"]; var arsrobjselect = document.getElementsBytagName ("Seleccionar"); 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 (opacidad = 50); izquierda: 0px; posición: absoluto; superior: 0px;} #divopenwin {en segundo plano: #eeeeee; posición: absoluto; izquierda: 0px; top: 0px; visual Ancho: 300px; altura: 150px} </style> <div id = "divpagemask"> </div> <div id = "Divopenwin"> <center> <a href = "javascript: close ();"> cerrar </a> </center> </div> <lelebel> </selabel> <center> <centel <centor cellspadding = "0" 0 "CellPapacing 0" 0 "0" <td colspan = "2" align = "centro"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <tr> <td style = "Color:#6666666; Font-Size: 13px"> </td> </tr> </tbody> </table> <table bgcolor = "#e1e1e1" celular de celda = "0" celular = "1"> <tbody> <tr> <td <td = "central" bgcolor = "#f9f9f9f9" <tave thedpaN CellPadding = 0 width = 600 style = "margin-top: 20px"> <form de nombre = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> palabras clave: </td> <td> <input type = "text" name = "k" size = 30/> </td> <td> </td </td/</td> <td> <input type = "text" name = "k" size = 30/> </td> <td> </td> ancho = 101> Ubicación: </td> <td align = medio medio = 97 id = "cn"> <script language = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?cityN=BeiJing"> </scritch> </td> <td align = mediano width = 95> type = Subt value = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "Middle"> Por ejemplo: restaurante; accesorios; supermercado </table> </td> </tr> </tbody> </table> </table> </table> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javaScript: open ();"> Open Mask </a> </P> <P align = "Center"> </p> <table <table align " CellPadding = "0" CellPacing = "0"> <tbody> <!-<tr> <td align = "center" en segundo plano/"imágenes/index/line_2.gif"> <img src = "images/index/line_2.gif"> </td> color = "#FF6600"> Promoción de la tienda </a> | <a href = "#"> Acerca de la tienda </a> | <a class = B href = "#" Target = _Blank> Cooperación comercial </a> | <a onClick = "this.style.behavior = 'url (#default#homepage)'; this.sethomepage ('http://www.sopull.com'); return false;" href = "http://www.sopull.com/#"> establecido como página de inicio </a> | <a onClick = "javascript: window.external.addfavorite ('http://www.sopull.com/'.'soupu.com-china' El motor de búsqueda de la tienda más grande ')" href = "http://www.sopull.com/#"> Agrega a favoritas </a> </td> <//tr> <tr> <tr> Supu.com Guangdong ICP No. 07006767 </td> </tr> </tbody> </table>