Este artículo describe el método de implementación completo de JS Pop-up Dronable y Cerrar Div Layer. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS aparece una capa Div que puede ser arrastrada y cerrada </title>
<estilo>
html, cuerpo {altura: 100%; desbordamiento: oculto;}
cuerpo, div, h2 {margen: 0; relleno: 0;}
cuerpo {fuente: 12px/1.5 tahoma;}
Centro {Padding-top: 10px;}
botón {cursor: pointer;}
#win {posición: absoluto; arriba: 50%; izquierda: 50%; ancho: 400px; altura: 200px; fondo: #ffff; borde: 4px sólido #f90; margen: -102px 0 0 -202px; pantalla: ninguno;}
H2 {Font-Size: 12px; Height: 18px; Text-Align: Right; Background: #FC0; Border-Bottom: 3px Solid #F90; Padding: 5px; Cursor: Move;}
h2 span {color:#f90; cursor: pointer; fondo: #fff; borde: 1px sólido#f90; relleno: 0 2px;}
</style>
<script>
Window.Onload = function ()
{
var owin = document.getElementById ("win");
var obtn = document.getElementsByTagName ("Botón") [0];
var oClose = document.getElementById ("cerrar");
var Oh2 = owin.getElementsByTagName ("H2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.OnClick = function ()
{
owin.style.display = "bloque"
};
oclose.OnClick = function ()
{
owin.style.display = "Ninguno"
};
oclose.onmousedown = función (evento)
{
(Evento || Window.Event) .CancELBubble = True;
};
OH2.onMousEdown = function (evento)
{
VAR Event = Event || Window.event;
bdrag = verdadero;
disx = event.clientx - owin.offsetleft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
devolver falso
};
document.onmouseMove = function (evento)
{
if (! bdrag) return;
VAR Event = Event || Window.event;
var il = event.clientx - disx;
var it = event.clienty - disy;
var maxl = document.documentelement.clientwidth - owin.offsetwidth;
var maxt = document.documentelement.clientHeight - owin.offsetheight;
il = il <0? 0: IL;
il = il> maxl? Maxl: IL;
it = it <0? 0: It;
it = it> maxt? Maxt: It;
owin.style.margintop = owin.style.marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
devolver falso
};
document.onmouseup = window.onblur = oh2.onloseCapture = function ()
{
bdrag = falso;
OH2.ReleaseCapture && OH2.ReleaseCapture ();
};
};
</script>
</ablo>
<Body>
<div id = "win"> <h2> <span id = "cerrar"> × </span> </h2> </div>
<Center> <boton> Pop Layer </boton> </center>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.