Método JS para implementar la capa emergente Div

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.