介紹一種彈出層效果的JS代碼

2024-09-06 12:31:26

字體：大中小

來源：轉載

供稿：網友

本文介紹了一種在網頁中彈出層的效果，下面直接給出了源代碼：代碼分兩部分，html代碼和JS源代碼。

html代碼：

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

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