Метод JS для реализации слоя всплывающего окна DIV

В этой статье описывается метод реализации слоя всплывающего окна DIV от JS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:

Кстати, действительно легко реализовать всплывающие слои, когда выпускаются различные плагины. Тем не менее, я иногда думаю, что эти плагины не являются практичными и часто находят некоторые чистые оригинальные JS. Позвольте мне поделиться с вами местным экземпляром слоя JS DIV. Друзья в нуждающихся могут взглянуть.

Само собой разумеется, просто опубликуйте код. Есть коды и комментарии:

Скопируйте код следующим образом:/*

* Всплыть слой div

*/

Функция showdiv ()

{

variv = document.getElementById ("IDIV");

var mou_head = document.getElementById ('mou_head');

Idiv.style.display = "block";

// Следующие детали должны быть центрированы для отображения всплывающего слоя

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";

// Следующие части делают всю страницу серо

var procbg = document.createElement ("div"); // Сначала создать див

procbg.setattribute ("id", "mybg"); // Определить идентификатор DIV

procbg.style.background = "#000000";

procbg.style.width = "100%";

procbg.style.height = "100%";

procbg.style.position = "fixed";

procbg.style.top = "0";

procbg.style.left = "0";

procbg.style.zindex = "500";

procbg.style.opacity = "0,6";

procbg.style.filter = "alpha (непрозрачность = 70)";

// Добавить фоновый слой на страницу

document.body.appendchild (procbg);

document.body.style.overflow = "hidden"; // Отмена прокрутки

// Следующие части осознают эффект перетаскивания всплывающего слоя

var posx;

var posy;

mou_head.onmousedown = function (e)

{

if (! e) e = window.event; // т.е.

posx = e.clientx - parseint (idiv.style.left);

posy = e.clienty - parseint (idiv.style.top);

document.onmouseMove = mouseMove;

}

document.onmouseup = function ()

{

document.onmouseMove = null;

}

Функция MouseMove (EV)

{

if (ev == null) ev = window.event; // т.е.

Idiv.style.left = (ev.clientx - posx) + "px";

Idiv.style.top = (ev.clienty - posy) + "px";

}

}

функция закрыто

{

variv = document.getElementById ("IDIV");

Idiv.style.display = "none";

document.body.style.overflow = "auto"; // восстановить прокрутку страницы

var body = document.getelementsbytagname ("body");

var mybg = document.getElementbyId ("mybg");

тело [0] .RemoveChild (mybg);

}

<!-Поп-слой запускается->

<div id = "idiv" style = "display: none; позиция: абсолют; z-index: 1000; фон:#67a3d9;">

<div id = "mou_head" 100px; высота = 10px; z-index: 1001; Положение: Absolute; "> Это используется для реализации слоев перетаскивания </div>

<input type = "button" value = "close" onclick = "blostiv ();" />

</div>

<!-end->

Что касается некоторых эффектов украшения, вы можете изменить их самостоятельно.

Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.