JavaScript 弹出层，背景变暗_层和布局特效

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

JavaScript 弹出层，背景变暗，代码不算多，根据你的需要调整一下，这里只是实现了基础的思路，美化不是太好。

<title>JavaScript 弹出层，背景变暗</title>
<script>
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 = "200px";
   newDiv.style.height = "300px";
   newDiv.style.top = "100px";
   newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
   newDiv.style.background = "EEEEEE";
   newDiv.style.border = "1px solid #0066cc";
   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);
   // docutment www.mb5u.com 
   // 关闭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);
}
</script>
<a href="#" onclick="openNewDiv('newDiv');return false;">弹出新层</a>

所属频道：层和布局特效/更新时间：2012-11-22

[收藏][报错][返回列表]

评论加载中....

JavaScript 弹出层，背景变暗_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

閺€鎯版&閸掑棔闊�