Como implementar a caixa pop-up da camada de máscara

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.