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.