Abra o código js mais simples da camada de máscara modal

Suponha que temos um contêiner como segue:

Copie o código do código da seguinte forma:

<style type="texto/css">

#container{largura:auto;altura:auto; estouro:oculto;}

/*O atributo overflow:hidden; aqui é principalmente para definir a parte além do contêiner para ser ocultada automaticamente. A razão pela qual esse atributo é definido é para resolver o problema de compatibilidade do navegador do IE8 e versões anteriores*/.

</estilo>

<div id="contêiner" >

</div>

Agora queremos abrir uma camada div na página da web para que o contêiner não possa ser operado antes de fechar a camada div pop-up.

Então, primeiro precisamos definir a camada div desta máscara da seguinte forma:

Copie o código do código da seguinte forma:

<div id="continer">

<!―Basta colocar a camada de máscara dentro do contêiner

<divid=”shade” style=”width:1600px;height:900px;/*Dê um tamanho inicial à camada de máscara*/”>

<nome de entrada=”fechar” id=”fechar” valor=”fechar”>

</div>

</div>

Em seguida, use js para fazer com que a camada de máscara sempre seja exibida na tela e o conteúdo sob a camada de máscara não possa ser manipulado. Clique no botão Fechar para fechar a camada de máscara.

Copie o código do código da seguinte forma:

<script type="texto/javascript">

$(função(){

//Obtém a largura e altura internas do navegador atual

varnWidth = window.innerWidth;

varnHeight = janela.innerHeight;

//Define a largura e altura da camada de máscara

$("#sombra").largura(nLargura);

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

//Define o botão Fechar para ser exibido no centro

$("#fechar").css("margem-topo",nAltura/2-50+"px");

//Define o evento que é acionado quando o tamanho do navegador muda

$(janela).resize(function(){

//Obtém a largura e altura internas do navegador atual

varnWidth = window.innerWidth;

varnHeight = janela.innerHeight;

//Define a largura e altura da camada de máscara

$("#sombra").largura(nLargura);

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

//Define o botão Fechar para ser exibido no centro

$("#putPwd").css("margem-topo",nAltura/2-50+"px");

});

//Defina o botão Fechar para eliminar a camada de máscara

$("#fechar").click(função(){

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

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

});

//Também pode ser escrito em js puro

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

//É inútil falar mais tarde. Se você estiver interessado, mas realmente não sabe escrever, pode entrar em contato comigo.

})

</script>