介绍一种弹出层效果的JS代码

时间：2021-05-02

本文介绍了一种在网页中弹出层的效果，下面直接给出了源代码：代码分两部分，html代码和JS源代码。

html代码：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出层效果</title></head>

<script src = "openNewDiv.js"></script>

<body><a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a><p>网页内容</p></body></html>

js代码：

var docEle = function() { return document.getElementById(arguments[0]) || false;}

function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv = document.createElement("div"); newDiv.id = _id; newDiv.style.position = "absolute"; newDiv.style.zIndex = "9999"; newDiv.style.width = "300px"; newDiv.style.height = "200px"; newDiv.style.top = "160px"; newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中 newDiv.style.background = "#EFEFEF"; newDiv.style.border = "1px solid #860001"; newDiv.style.padding = "5px"; newDiv.innerHTML = "新激活图层内容"; document.body.appendChild(newDiv); // mask图层 var newMask = document.createElement("div"); newMask.id = m; newMask.style.position = "absolute"; newMask.style.zIndex = "1"; newMask.style.width = document.body.scrollWidth + "px"; newMask.style.height = document.body.scrollHeight + "px"; newMask.style.top = "0px"; newMask.style.left = "0px"; newMask.style.background = "#000"; newMask.style.filter = "alpha(opacity=40)"; newMask.style.opacity = "0.40"; document.body.appendChild(newMask); // 关闭mask和新图层 var newA = document.createElement("a"); newA.href = "#"; newA.innerHTML = "关闭激活层"; newA.onclick = function() { document.body.removeChild(docEle(_id)); document.body.removeChild(docEle(m)); return false;}

newDiv.appendChild(newA);}

点击下载此文的源代码文件

本文源自：翔宇亭——IT乐园（http://），转载请保留此信息！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章