一个流行的弹出层的效果！

web718

于 2007-10-31 15:02:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： function 浏览器 float div 测试 css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/web718/article/details/1859529

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

<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 = "#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);

}

</script>

<body>

<a href="#" onclick="openNewDiv('newDiv');return false;">激活新层</a>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

<p>网页内容网页内容网页内容</p>

</body>

op ff ie 都测试通过，包括mask层在三个浏览器上的透明度。

不过还是有些问题：
1、mask层出现后，ctrl+a还是可以全选，显得mask效果不够完善。
2、其次，mask层的计算浏览器的scrollWidth和scrollHeight还是有些问题的。

比如，在一个CSS+DIV的布局中，
<div style="margin: 0px auto">
<div style="float: left; width: 100px">左边</div>
<div style="float: reft; width: 100px">右边</div>
</div>
这种模式下的网页，某些浏览器无法通过scrollHeight来获得实际的页面高度，这种bug可以在QQ的那个争论的页面看到，mask没有覆盖全页。

解决办法可通过Dom获取页面实际高度，或者遍历每个float的层的实际高度总和。等等。。。。。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。