Este artigo descreve o método completo de implementação da camada DIV DRo-up JS pop-up e fechada. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<título> JS aparece uma camada div que pode ser arrastada e fechada </title>
<estilo>
html, corpo {altura: 100%; transbordamento: oculto;}
corpo, div, h2 {margem: 0; preenchimento: 0;}
corpo {font: 12px/1.5 tahoma;}
Centro {Top-top: 10px;}
Botão {Cursor: Pointer;}
#win {posição: absoluto; topo: 50%; esquerda: 50%; largura: 400px; altura: 200px; fundo: #ffff; borda: 4px sólido #f90; margem: -102px 0 0 -202px; display: nenhum;}
H2 {Size da fonte: 12px; Altura: 18px; Text-Align: Right; Background: #FC0; Border-Bottom: 3px Solid #F90; Padding: 5px; Cursor: Move;}
h2 span {color:#f90; cursor: ponteiro; fundo: #fff; borda: 1px Solid#f90; preenchimento: 0 2px;}
</style>
<Cript>
window.onload = function ()
{
var owin = document.getElementById ("win");
var obtn = document.getElementsByTagName ("Button") [0];
var oclose = document.getElementById ("Close");
var oh2 = owin.getElementsByTagName ("h2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.OnClick = function ()
{
owin.style.display = "bloco"
};
oclose.OnClick = function ()
{
owin.style.display = "nenhum"
};
oclose.onmousedown = function (evento)
{
(evento || window.event) .CancelBubble = true;
};
oh2.onmousedown = função (evento)
{
Var Evento = Evento || Window.Event;
bdrag = true;
disx = event.clientX - Owin.OffSetLeft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setcapture ();
retornar falso
};
document.onMousEmove = function (evento)
{
se (! bdrag) retornar;
Var Evento = Evento || 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";
retornar falso
};
document.onmouseup = window.onblur = oh2.onloseCapture = function ()
{
bdrag = false;
OH2.RELEASECAPTURA && oh2.ReleasecApture ();
};
};
</script>
</head>
<Body>
<div id = "win"> <h2> <span id = "close"> × </span> </h2> </div>
<Center> <butto> camada pop </botão> </stert>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.