Aparece el código js más simple de la capa de máscara modal

Supongamos que tenemos un contenedor contenedor de la siguiente manera:

Copie el código de código de la siguiente manera:

<tipo de estilo="texto/css">

#contenedor{ancho:auto;alto:auto; desbordamiento:oculto;}

/*El atributo overflow:hidden; aquí es principalmente para configurar la parte más allá del contenedor para que se oculte automáticamente. La razón por la que se establece este atributo es para resolver el problema de compatibilidad del navegador de IE8 y versiones inferiores*/.

</estilo>

<div id="contenedor" >

</div>

Ahora queremos abrir una capa div en la página web para que el contenedor no pueda operarse antes de cerrar la capa div emergente.

Luego, primero debemos definir la capa div de esta máscara de la siguiente manera:

Copie el código de código de la siguiente manera:

<div id="continuador">

<!―Simplemente coloca la capa de máscara dentro del contenedor.

<divid=”shade” style=”width:1600px;height:900px;/*Dale a la capa de máscara un tamaño inicial*/”>

<nombre de entrada=”cerrar” id=”cerrar” valor=”cerrar”>

</div>

</div>

A continuación, use js para que la capa de máscara se muestre siempre en la pantalla y el contenido debajo de la capa de máscara no se pueda manipular. Haga clic en el botón cerrar para cerrar la capa de máscara.

Copie el código de código de la siguiente manera:

<tipo de script="texto/javascript">

$(función(){

//Obtiene el ancho y alto internos del navegador actual

varnWidth = ventana.innerWidth;

varnHeight = ventana.innerHeight;

//Establece el ancho y alto de la capa de máscara

$("#sombra").width(nAncho);

$("#sombra").height(nAltura);

//Establece el botón de cerrar para que se muestre en el centro

$("#close").css("margin-top",nHeight/2-50+"px");

//Establece el evento que se activa cuando cambia el tamaño del navegador

$(ventana).resize(función(){

//Obtiene el ancho y alto internos del navegador actual

varnWidth = ventana.innerWidth;

varnHeight = ventana.innerHeight;

//Establece el ancho y alto de la capa de máscara

$("#sombra").width(nAncho);

$("#sombra").height(nAltura);

//Establece el botón de cerrar para que se muestre en el centro

$("#putPwd").css("margin-top",nHeight/2-50+"px");

});

//Establece el botón de cerrar para eliminar la capa de máscara

$("#cerrar").hacer clic(función(){

$("#sombra").removeAttr("id");

$("#sombra").html("");

});

//También se puede escribir en js puro

Document.getElementById(“sombra”).estilo…….;

// Es inútil decir más después. Si estás interesado pero realmente no sabes escribir, puedes contactarme.

})

</script>