В этой статье описывается полный метод реализации всплывающего и закрытого уровня Div-слоя JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS выскочивает слой div, который можно перетаскивать и закрыть </title>
<style>
html, тело {высота: 100%; переполнение: скрыто;}
тело, div, h2 {рентабель: 0; накладка: 0;}
тело {font: 12px/1,5 Tahoma;}
Центр {Padding-Top: 10px;}
кнопка {coursor: pointer;}
#win {положение: абсолют; верх: 50%; слева: 50%; ширина: 400px; высота: 200px; фон: #ffff; граница: 4px solid #f90; маржа: -102px 0 0 -202px; дисплей: нет;}
H2 {Font-Size: 12px; Высота: 18px; Text-align: справа; фон: #fc0; Border-Bottom: 3px Solid #F90; Padding: 5px; Cursor: Move;}
H2 SPAN {Color:#F90; Cursor: Pointer; фон: #fff; граница: 1px solid#f90; Padding: 0 2px;}
</style>
<Скрипт>
window.onload = function ()
{
var owin = document.getElementbyId ("Win");
var octn = document.getElementsbytagname ("кнопка") [0];
var oclose = document.getElementbyId ("close");
var OH2 = OWIN.GetElementsBytagName ("H2") [0];
var bdrag = false;
var disx = disy = 0;
optn.onclick = function ()
{
owin.style.display = "block"
};
oclose.onclick = function ()
{
owin.style.display = "Нет"
};
oclose.onmousedown = function (событие)
{
(Event || window.event) .cancelbubble = true;
};
OH2.onmouseDown = function (событие)
{
var Event = Event || window.event;
bdrag = true;
disx = event.clientx - owin.offsetleft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
вернуть ложь
};
document.onmouseMove = function (событие)
{
if (! bdrag) возврат;
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;
это = это <0? 0: это;
это = это> maxt? МакСТ: Это;
owin.style.margintop = owin.style.marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
вернуть ложь
};
document.onmouseup = window.onblur = oh2.onlosecapture = function ()
{
bdrag = false;
OH2.ReleaseCapture && OH2.ReleAseCapture ();
};
};
</script>
</head>
<тело>
<div id = "Win"> <h2> <span id = "close"> × </span> </h2> </div>
<CENTER> <Tood> POP -слой </button> </center>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.