Este artículo describe el método para implementar la capa emergente Div por JS. Compártelo para su referencia. El análisis específico es el siguiente:
Por cierto, es realmente fácil implementar capas emergentes cuando se lanzan varios complementos. Sin embargo, a veces pienso que esos complementos no son prácticos y a menudo encuentran algunas cosas originales de JS puras. Déjame compartir con ustedes una instancia nativa de la capa emergente JS Div. Los amigos necesitados pueden echar un vistazo.
No hace falta decir que solo publique el código. Hay códigos y comentarios:
Copie el código de la siguiente manera:/*
* Empuja la capa Div
*/
función showDiv ()
{
var idiv = document.getElementById ("idiv");
var mou_head = document.getElementById ('mou_head');
Idiv.style.display = "bloque";
// Las siguientes partes deben centrarse para mostrar la capa emergente
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";
// Las siguientes partes hacen que la página completa se haga con grises
var procBG = document.createElement ("div"); // crear un div primero
procBG.SetAttribute ("id", "mybg"); // Defina la identificación del div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fijo";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alfa (opacidad = 70)";
// Agregar la capa de fondo a la página
document.body.appendChild (PROCBG);
document.body.style.overflow = "Hidden"; // Cancelar barra de desplazamiento
// Las siguientes partes se dan cuenta del efecto de arrastre de la capa emergente
var posx;
var Posy;
mou_head.onmousedown = function (e)
{
if (! e) e = window.event; //ES DECIR
posx = e.clientx - parseInt (idiv.style.left);
posy = e.clienty - parseint (idiv.style.top);
documento.onmousemove = mouseMove;
}
document.onmouseUp = function ()
{
document.onmouseMove = null;
}
función mouseMove (EV)
{
if (ev == null) ev = window.event; // es decir
Idiv.style.left = (ev.clientx - posx) + "px";
Idiv.style.top = (ev.clienty - posy) + "px";
}
}
función cerrada () // Cierre la capa emergente
{
var idiv = document.getElementById ("idiv");
Idiv.style.display = "Ninguno";
document.body.style.overflow = "auto"; // Restaurar la barra de desplazamiento de la página
var cuerpo = document.getElementsBytagName ("Body");
var mybg = document.getElementById ("mybg");
cuerpo [0] .removechild (mybg);
}
<!-Pop Layer comienza->
<div id = "idiv" style = "Display: Ninguno; Posición: Absolute; Z-Index: 1000; Antecedentes:#67A3D9;">
<div id = "mou_head" 100px; altura = 10px; índice z: 1001; Posición: Absoluto; "> Esto se usa para implementar capas de arrastre </div>
<input type = "Botton" value = "Close" onClick = "cerrado ();" />
</div>
<!-fin->
En cuanto a algunos efectos de embellecimiento, puede modificarlos usted mismo.
Espero que este artículo sea útil para la programación de JavaScript de todos.