El efecto de capa de máscara translúcida se logra básicamente usando complementos. Permítanme compartir con ustedes el uso de JS nativos para lograr un efecto de máscara translúcida. Los amigos interesados pueden referirse a él. Espero que sea útil para usted estar familiarizado con JS nativo.
<viv> <h4> <span> Registro ahora </span> <span> Close </span> </h4> <p> <label> UserName </label> <input type = "text" onMouseOver = "this.style.border = '1px sólido #f60'" onfoUcs = "this.style.border = '1px solid #ccc '"/> </p> <p> <label> contraseña </etiqueta> <input type =" contraseña "onmouseOver =" this.style.border =' 1px sólido #f60 '"onfoUcs =" this.style.border =' 1px sólido #f60 '"onblur =" this.style.border =' 1px sólido #ccc '" type = "Subt" value = "Register"/> <input type = "reset" value = "reset"/> </p> </div> <div> </div> <!-Mask Layer div-> <script type = "text/javascript"> var myalert = document.getElementByid ("alerta"); var myMask = document.getElementById ('Mask'); var reg = document.getElementById ("contenido"). getElementsByTagName ("A") [0]; var mcLose = document.getElementById ("cerrar"); reg.onclick = function () {myMask.style.display = "bloque"; myalert.style.display = "bloque"; myalert.style.position = "Absolute"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "Hidden"; } mcLose.onClick = function () {myalert.style.display = "none"; mymask.style.display = "Ninguno"; } </script> </body> </html>Cubierta de pantalla completa
<! Doctype html> <style> #mask {posición: fijo; ancho: 100%; arriba: 0px; izquierda: 0px; _Position: Absoluto; _TOP: Expression (DocumentElement.scrollTop); Antecedentes: RGBA (0,0,0,0.5); Antecedentes: transparente/9; Filtro: progid: dximagetransform.microsoft.gradient (startColorStr =#80000000, endcolortr =#80000000); visualización: ninguno;}#Mask_td {text-align: Center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "máscara"> <tr> <tr> <td Id = "_td "> </td> </tr> </table> isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // declarar la variable var img, máscara; // obtener el elemento img = document.getElementById ("img"); document.getElementById ("Mask"); Mask.td = document.getElementBy ("" Maskd "; de Mask Mask.setsize = function () {// Obtenga el ancho de área visible del documento y configúrelo en la máscara var de = document.documentelement; Mask.style.width = de.clientWidth+"Px" Mask.style.height = de.clientheight+"Px" Mask.style.height = de.clientheight+"PX";}; // Agregar el método de exposición Mask.show = function () {// ocultar el documento de barra de desplazamiento [isie <9? "Documelement": ":" Cuerpo " ] .style.overflow = "oculto"; // Calcule el tamaño de la máscara de máscara.setsize (); // show mask.style.display = isie == 6? "Bloque": "tabla";}; // Agregar método Hide Mask.hide = function () {// Mostrar documento de ScrollBar [ISIE <9? "DocumentEelement": "Body"] .style.overflow = ""; // Borrar el contenido dentro de Mask.td.innerhtml = ""; // ocultar mascar.style.display = "ninguno";}; // Agregar método de append mascar.append = function (e) {// Agregar contenido en Mask TD, usted Mask.td.AppendChild (e);}; // Haga clic en Mask para cerrar Mask.OnClick = Function (E) {// Juez de la fuente del evento, si se hace clic en el área en blanco, Close Mask E = E || Evento; (E.Target || E.SrCelement) == Mask.td && Mask.hide ();}; // Agregue el tamaño de la máscara cuando el tamaño de formulario cambia Window.onresize = function () {Mask.setsize ();}; // Haga clic en el evento de imagen img.onClick = function () {) {// Crear una imagen var o = nueva imagen; // Establecer la dirección de imagen o.src = img.src; // Agregar contenido Mask.append (O); // Show Mask.show ();}; </script>