El problema que encontré hoy es que la capa de máscara detrás de la capa emergente tiene una barra de desplazamiento, por lo que no hay una capa de máscara en el área invisible debajo de la barra de desplazamiento. La solución es agregar CSS.
código JS
<script type = "text/javaScript"> // show grey js máscara de la función showbg (ct, content) {var bh = $ (documento) .Height (); var bw = $ ("cuerpo"). width ()+16; var objwh = getobjwh (ct); $ ("#fullbg"). CSS ({ancho: bw, altura: bh, pantalla: "bloque"}); var tbt = objwh.split ("|") [0]+"Px"; var tbl = objwh.split ("|") [1]+"Px"; $ ("#diálogo"). show (); $ ("#"+ct) .css ({top: tbt, izquierda: tbl, display: "bloque"}); $ (ventana) .scroll (function () {resetbg ()}); $ (ventana) .resize (function () {resetbg ()}); } function getObJWH (obj) {var st = document.documentelement.scrolltop; // distancia de la barra de desplazamiento a la var pantalla var objh = $ ("#"+obj) .Height (); // La altura del objeto flotante var objw = $ ("#"+obj) .width (); // El ancho del objeto flotante var objt = number (st)+(number (ch) -number (objh)/2; var objl = número (sl)+(número (cw) -number (objw))/2; return objt+"|"+objl; } función resetbg () {var fullBG = $ ("#fullbg"). CSS ("Display"); if (fullbg == "bloque") {var bh2 = $ ("cuerpo"). Height (); var bw2 = $ ("cuerpo"). width ()+16; $ ("#fullbg"). CSS ({ancho: bw2, altura: bh2}); var objv = getObJWh ("diálogo"); var tbt = objv.split ("|") [0]+"Px"; var tbl = objv.split ("|") [1]+"Px"; $ ("#diálogo"). CSS ({top: tbt, izquierda: tbl}); }} // Cierre la capa de máscara JS gris y la función de ventana de operación CloseBg () {$ ("#fullbg"). CSS ("Display", "Ninguno"); $ ("#diálogo"). css ("visualización", "ninguno");} </script>código CSS
#fullBg {Background-Color: Gray; Pantalla: ninguno; Índice Z: 3; Izquierda: 0px; Opacidad: 0.5; arriba: 0; Izquierda: 0; Altura: 100%; Ancho: 100%; Índice Z: 999; Posición: fijo; _Position: Absoluto; _left: Expression_r (documentElement.scrollleft + documentElement.clientWidth - this.OffSetWidth); _TOP: Expression_r (documentElement.ScrollTop + DocumentEelement.ClientHeight - this.OffSetheTight); Filtro: alfa (opacidad = 30); Opacidad: 0.3; } #dialog {ancho: 560px; Antecedentes: #EEE; Pantalla: ninguno; índice z: 5; relleno: 16px; tamaño de fuente: 12px; índice z: 1000; posición: absoluto;}#diálogo sup {color:#f00;}#diálogo .close0 {posición: relativo; arriba: -24px; Izquierda: 544px; Altura: 38px; Ancho: 40px;}código HTML
<div id = "fullbg"> </div> <!-End JS Mask Layer-> <!-Dialog-> <div id = "diálogo"> <div> <a href = "#" onClick = "closeBg ();"> <img src = "__ img __/cerrado Information</h3><p>(Note: The following information is only used to send you relevant service materials as needed, and will not leak information. Please understand)</p><table cellpacing="1" cellpadding="0"> <tr> <td bgcolor="#eeeeee"><sup>*</sup>User ID</td> <td bgcolor = "#fbfbfb"> <b> {$ member.member_name} </b> </td> <td bgcolor = "#eeeeee"> <sup>*</sp> real name </td> <td bgcolor = "#fbfbfb"> <b> bgcolor = "#eeeeeeee"> género </td> <td bgcolor = "#fbfbfb"> <b> <php> echo $ gender [$ info ['gender']]; </php> </b> </td> </tr> <tr> <td bgcolor = "#eeeeee"> </sp>*</sup> </sup> <td bgcolor = "#fbfbfb"> <b> {$ info.telephone} </b> </td> <td bgcolor = "#eeeeee"> email </td> <td colspan = "3" bgcolor = "#fbfbfb"> <b> <tr> <td colspan = "2" bgcolor = "#eeeeeeee"> <up>*</sp> válido id (tarjeta de id) </td> <td colspan = "4" bgcolor = "#fbfbfb"> <b> {$ info.ids} </b> </td> </tr> <tr> <td bgcolor = "#eeeeee"> dirección postal </td> <td colspan = "3" bgcolor = "#fbfbfb"> <b> {$ info.address} </b> </td> <td bgcolor = "#eeeeee"> zip code </td> <td bgcolor = "#fbfbfb"> <b> {$ info.zips} </b> </td> </tr> </table> </div> </div>Cálmate y continúa paso a paso.
El artículo anterior es un cliché sobre el tema de la barra de desplazamiento de la capa de máscara. Este es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.