Este artigo descreve o método do JS+CSS para implementar as janelas pop-up da div e escurecer o plano de fundo. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<head>
<title> JS+CSS Implementação da janela pop -up Div, enquanto o fundo se torna mais escuro </ititle>
<Cript>
função bloqueando () {
document.all.ly.style.display = "bloco";
document.all.ly.style.width = document.body.clientWidth;
document.all.ly.style.Height = document.body.clientHeight;
document.all.layer2.style.display = 'bloco';
}
função lock_checkform (theForm) {
document.all.ly.style.display = 'nenhum'; document.all.layer2.style.display = 'nenhum';
retornar falso;
}
</script>
<style type = "text/css">
<!-
.Style1 {font-size: 12px}
A: Link {
Cor: #000;
Decoração de texto: Nenhum;
}
A: visitado {
Decoração de texto: Nenhum;
}
A: Hover {
Decoração de texto: Nenhum;
}
A: ativo {
Decoração de texto: Nenhum;
}
->
</style>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
</head>
<Body>
<p align = "Center">
<input type = "button" value = "pop -up div" onclick = "bloqueio ()" />
</p>
<div id = "ly" style = "posição: absoluto; topo: 0px; filtro: alfa (opacidade = 60); cor de fundo: #777;
Z-Index: 2; Esquerda: 0px; Exibição: Nenhum; ">
</div>
<!-estrutura flutuante Início->
<div id = "camada2" align = "center" style = "posição: absoluto; z-index: 3; esquerda: expressão ((document.body.offsetWidth-540)/2); topo: expressão ((document.body.offsetheight-170)/10);
Background-Color: #FFF; Exibição: Nenhum; ">
<tabela CellPadding = "0" CellPacing = "0" Style = "Border: 0 Solid #E7E3E7;
colapso da fronteira: colapso; ">
<tr>
<td style = "Background-color: #73A2D6; cor: #ffff; preenchimento-esquerda: 4px; tapd-top: 2px;
Peso da fonte: negrito; Size da fonte: 12px; "valign =" meio ">
<div align = "direita"> <a href = javascript:; OnClick = "Lock_CheckForm (this);"> [feche] </a> </div> </td>
</tr>
<tr>
<td align = "Center">
<br> <br> <hr> <p align = "center"> <font color = vermelho> Esses efeitos especiais são coletados da Internet apenas para interesse e aprendizado, e não são para fins comerciais. Fonte: wulin.com </font> </p>
</td>
</tr>
</tabela>
</div>
<!-Final de estrutura flutuante->
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.