Este artigo descreve o método de implementar quadros pop-up da camada de máscara por JS. Compartilhe para sua referência. A análise específica é a seguinte:
Ontem, o site da empresa precisava de uma janela pop-up para solicitar algumas informações e me pediu para escrever o código JS pop-up e a janela pop-up HTML juntos, basta ligar para onde precisar.
Não vou dizer muito, basta enviar o código e sinto que definitivamente haverá problemas de compatibilidade. Por favor, aponte se você vir:
Copie o código da seguinte
#H-dialog {display: nenhum; posição: absoluto; z-índice: 999999; largura: 400px; altura: auto; Background-Color: #fff;}
#H-dialog .close {float: direita; font-size: 30px; margem-direita: 10px; margin-top: 5px; cursor: ponteiro;}
#H-dialog .title {altura: 40px; preenchimento-esquerda: 10px; Size da fonte: 20px; altura de linha: 40px;}
#H-dialog #msgCont {altura: 36px; margem: 30px 0 50px; preenchimento-esquerda: 65px; tamanho da fonte: 25px; altura da linha: 36px; alinhamento vertical: meio; Antecedentes: URL (../ imagens/ui_alert.png) No-repetir 20px 50%;}
</style>
<div id = "h-dialog">
<a onclick = "popupClose (this)"> × </a>
<div> dica </div>
<div id = "msgCont"> conteúdo </div>
</div>
<script type = "text/javascript">
// bloqueia a tela de fundo
Função LockScreen () {
var clienth = document.body.offsethEight; // altura do corpo
var clientw = document.body.offsetWidth; // Largura do corpo
var doch = document.body.scrolHeight; // Altura do navegador
var docw = document.body.scrollwidth; // Largura do navegador
var bgw = clientw> docw? ClientW: DOCW; // Obtenha a largura válida
var bgh = clienth> Doch? ClientH: Doch; // Obtenha a alta válida
var Blackbg = document.createElement ("div");
Blackbg.id = "Blackbg";
Blackbg.style.Position = "Absolute";
blackbg.style.zindex = "99999";
blackbg.style.top = "0";
blackbg.style.left = "0";
blackbg.style.width = bgw+"px";
Blackbg.style.Height = BGH+"PX";
blackbg.style.opacity = "0.4";
Blackbg.style.backgroundColor = "#333";
document.body.appendChild (Blackbg);
}
// Evento de botão Fechar
função popupclose (el) {
var Blackbg = document.getElementById ("Blackbg");
Blackbg && Document.body.removeChild (Blackbg);
el.parentnode.style.display = "nenhum";
}
// origina
função autoclose (id) {
id = id || "H-dialog";
var Blackbg = document.getElementById ("Blackbg");
var objdiv = document.getElementById (id);
setTimeout (function () {
Blackbg && Document.body.removeChild (Blackbg);
objdiv.style.display = "nenhum";
}, 2000);
}
/**
*Função: Informações pop-up
* Parâmetro 1: Conteúdo da informação imediata
* Parâmetro 2: O status de informação prompt de prompt padrão é 0. As informações prompts são 1. As informações de sucesso são
* Parâmetro 3: O ID da Div pop-up, o padrão "h-dialog"
* Parâmetro 4: o ID do conteúdo da janela pop-up, padrão "msgCont"
**/
função showmsg (msg) {
msg = msg || "Por favor, reopor";
Var Status = argumentos [1] || 0,
popupido = argumentos [2] || "H-dialog",
contentId = argumentos [3] || "msgCont";
LockScreen ();
// a altura e largura reais da tela
var warwidth = window.innerwidth;
var pageHeight = window.innerHeight;
if (typeof página largura! = "número") {
if (document.compatmode == "css1compat") {
PageWidth = document.documentElement.clientWidth;
PageHeight = document.documentElement.clientHeight;
} outro {
PageWidth = document.body.clientWidth;
PageHeight = document.body.clientHeight;
}
}
// a barra de rolagem tem uma altura e largura
var scrollLeft = window.document.documentElement.scrollleft;
var scrolltop = 0;
if (typeof window.pageyoffset! = 'indefinido') {
scrolltop = window.pageyoffset;
} else if (typeof window.document.compatmode! = 'indefinido' &&
window.document.compatmode! = 'backcompat') {
scrolltop = window.document.documentElement.scrolltop;
} else if (typeof window.document.body! = 'indefinido') {
scrolltop = window.document.body.scrolltop;
}
var div_x = (largura de página - 400) / 2 + rollleft;
var div_y = (PageHeight - 200) / 2 + scrolltop;
var objdiv = document.getElementById (popupid);
if (status) {
document.getElementById (contentId) .style.background = "URL ($ root/Assets/Images/ui_success.png) No-repetir 20px 50%";
}
document.getElementById (contentId) .innerhtml = msg;
objdiv.style.display = "bloco";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
autoclose (popupido);
}
</script>
Espero que este artigo seja útil para a programação JavaScript de todos.