В этой статье описывается метод реализации слоя всплывающего окна 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.