Método JS para implementar a camada pop-up div

Este artigo descreve o método de implementação da camada pop-up da div por JS. Compartilhe para sua referência. A análise específica é a seguinte:

A propósito, é realmente fácil implementar camadas pop-up quando vários plug-ins são lançados. No entanto, às vezes acho que esses plug-ins não são práticos e geralmente encontram algumas coisas originais puras do JS. Deixe-me compartilhar com você uma instância nativa da camada pop-up JS Div. Amigos necessitados podem dar uma olhada.

Escusado será dizer que basta postar o código. Existem códigos e comentários:

Copie o código da seguinte forma:/*

* Coloque a camada div

*/

função showdiv ()

{

var idiv = document.getElementById ("idiv");

var mou_head = document.getElementById ('mou_head');

Idiv.style.display = "bloco";

// as seguintes peças devem ser centradas para exibir a camada pop-up

Idiv.style.left = (document.documentElement.clientwidth-idiv.clientwidth) /2+document.documentElement.scrollleft+ "px";

Idiv.style.top = (document.documentElement.clientHeight-idiv.clientHeight) /2+Document.documentElement.Scrolltop-50+ "px";

// as seguintes peças tornam a página inteira clicável de gray-out

var procbg = document.createElement ("div"); // Crie uma div primeiro

procbg.setattribute ("id", "mybg"); // Defina o ID da div

procbg.style.background = "#000000";

procbg.style.width = "100%";

procbg.style.Height = "100%";

procbg.style.position = "fixado";

procbg.style.top = "0";

procbg.style.left = "0";

procbg.style.zindex = "500";

procbg.style.opacity = "0.6";

procbg.style.filter = "alpha (opacidade = 70)";

// Adicione a camada de fundo à página

document.body.appendChild (procbg);

document.body.style.overflow = "Hidden"; // Cancelar barra de rolagem

// as seguintes partes percebem o efeito de arrasto da camada pop-up

var posx;

var posy;

mou_head.onmousedown = function (e)

{

if (! e) e = window.event; // ou seja

Posx = e.clientX - parseint (idiv.style.left);

posy = e.clienty - parseint (idiv.style.top);

document.onMousEmove = mouseMove;

}

document.onmouseup = function ()

{

document.onMousEmove = null;

}

função mousemove (EV)

{

if (ev == null) ev = window.event; // ou seja,

Idiv.style.left = (ev.clientX - Posx) + "px";

Idiv.style.top = (ev.clienty - posy) + "px";

}

}

Função fechada () // feche a camada pop-up

{

var idiv = document.getElementById ("idiv");

Idiv.style.display = "nenhum";

document.body.style.overflow = "Auto"; // Restaurar a página de rolagem da página

var corpo = document.getElementsByTagName ("corpo");

var mybg = document.getElementById ("mybg");

corpo [0] .RemoVechild (mybg);

}

<!-camada pop inicia->

<div id = "idiv" style = "display: nenhum; posição: absoluto; z-índice: 1000; background:#67A3D9;">

<div id = "mou_head" 100px; altura = 10px; Z-índice: 1001; Posição: Absolute; "> Isso é usado para implementar camadas de arrasto </div>

<input type = "button" value = "feche" onclick = "fechado ();" />

</div>

<!-end->

Quanto a alguns efeitos de embelezamento, você pode modificá -los você mesmo.

Espero que este artigo seja útil para a programação JavaScript de todos.