Este artigo descreve o método de implementar a camada pop-up que cobre a página inteira do JS e CSS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Os estilos e estruturas comuns para fundos transparentes emoldurados na camada pop-up são os seguintes:
A cópia de código é a seguinte: .AlerTMessageBg {
Posição: fixado;
_Position: absoluto;
largura: 100%;
Altura: 100%;
Esquerda: 0;
topo: 0;
Antecedentes:#000;
Opacidade: 0,5;
-Moz-Opacity: 0,5;
filtro: alfa (opacidade = 50);
Z-Index: 97;
Exibir: Nenhum;
}
.alertMessagedivborder {
Posição: fixado;
_Position: absoluto;
Largura: 750px;
Altura: 370px;
Esquerda: 50%;
TOP: 50%;
margem: -185px 0 -375px;
Antecedentes:#000;
filtro: alfa (opacidade = 30);
-moz-opacidade: 0,3;
Opacidade: 0,3;
Z-Index: 98;
Exibir: Nenhum;
}
.alertMessagediv {
Posição: fixado;
_Position: absoluto;
Largura: 730px;
Altura: 350px;
Esquerda: 50%;
TOP: 50%;
margem: -175px 0 -365px;
Antecedentes: #FFF;
Z-Index: 99;
Exibir: Nenhum;
Size da fonte: 14px;
}
<div> </div>
<div> </div>
<div> </div>
Como cobrir toda a página da web com um fundo pop-up
Método 1.CSS
A cópia de código é a seguinte: .AlerTMessageBg {
Posição: fixado;
_Position: absoluto;
largura: 100%;
Altura: 100%;
Esquerda: 0;
topo: 0;
Antecedentes:#000;
Opacidade: 0,5;
-Moz-Opacity: 0,5;
filtro: alfa (opacidade = 50);
Z-Index: 97;
Exibir: Nenhum;
}
2.js Método
A cópia de código é a seguinte: .AlerTMessageBg {
Posição: Absoluto;
largura: 100%;
Altura: 100%;
Esquerda: 0;
topo: 0;
Antecedentes:#000;
Opacidade: 0,5;
-Moz-Opacity: 0,5;
filtro: alfa (opacidade = 50);
Z-Index: 97;
Exibir: Nenhum;
}
var bgwidth = document.body.clientwidth + 'px',
bgheight = document.body.clientHeight + 'px',
alertBgnode = $ ('. alertMessageBG');
alertbggnode.css ({'width': bgwidth, 'altura': bgheight});
Comparando os dois métodos acima, é óbvio que o método CSS é mais fácil de usar, especialmente agora que não precisa ser compatível com o IE6.
Espero que este artigo seja útil para a programação da Web baseada em JS.