星期四 阴转小雨 14～25℃
一个简单的div蒙层效果（原生js，兼容 IE、FF、Opera、chrome）
昨天找到的那个虽然效果不错，可是在一些低配置机器会比较卡，今天费了很大劲又找到一个，比较简单。测试时在chrome下发现一个问题，Y方向不居中，发现原来是chrome对scrollTop的识别问题。
原代码：
document.documentElement.scrollTop
修改为：
document.documentElement.scrollTop+document.body.scrollTop
2012-2-23 更新：
- 改变窗口大小时蒙层始终居中；
- 避免在页面无滚动条时，显示蒙层后出现纵向流动条；
- 显示蒙层时隐藏横向滚动条。
2012-2-27 更新：
拖动滚动条时蒙层始终居中。
全文例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<style type="text/css">
.pop { border:3px solid skyblue;width:400px; background:#fff; padding:5px; display:none;}
</style>
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtPopload(showId){
// 高度减去 4px，避免在页面无滚动条时显示遮罩后出现流动条
var h = (Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) – 4) + ‘px’;
var w = document.documentElement.scrollWidth + ‘px’;
var popCss = "background:#fefefe;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;border:0"
var rePosition_mask = function() {
pop_Box.style.height = h;
pop_Box.style.width = w;
pop_Iframe.style.height = h;
pop_Iframe.style.width = w;
if (document.documentElement.offsetWidth < 950) {
//防止正常宽度下点击时 在 ff 下出现页面滚动到顶部
document.documentElement.style.overflowX = "hidden";
}
}
var exsit = document.getElementById("popBox");
if (!exsit) {
var pop_Box = document.createElement("div");
pop_Box.id = "popBox";
document.getElementsByTagName("body")[0].appendChild(pop_Box);
pop_Box.style.cssText = popCss;
pop_Box.style.zIndex = "10";
var pop_Iframe = document.createElement("iframe"); // 这里如果用 div 的话，在 ie6 不能把 <select> 遮住
pop_Iframe.id = "popIframe";
document.getElementsByTagName("body")[0].appendChild(pop_Iframe);
pop_Iframe.style.cssText = popCss;
pop_Iframe.style.zIndex = "9";
rePosition_mask();
}
BtShow("popIframe");
BtShow("popBox");
BtShow(showId);
var pop_Win = document.getElementById(showId);
pop_Win.style.position = "absolute";
pop_Win.style.zIndex = "11";
var rePosition_pop = function() {
pop_Win.style.top = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight/2 – pop_Win.offsetHeight/2 + ‘px’;
pop_Win.style.left = document.documentElement.scrollLeft + document.body.scrollLeft + document.documentElement.clientWidth/2 – pop_Win.offsetWidth/2 + ‘px’;
}
rePosition_pop();
window.onresize = function(){
w = document.documentElement.offsetWidth + ‘px’; // 使用 scrollWidth 不能改变宽度
rePosition_mask();
rePosition_pop();
}
window.onscroll = function(){
rePosition_pop();
}
}
function BtPopShow(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}
}
function BtPopHide(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}
}
</script>
</head>
<body>
<a href="#@" id="open_1">测试一</a>
<a href="#@" id="open_2">测试二</a>
<div class="pop" id="tinybox_1"><a href="#" id="close_1">关闭一</a></div>
<div class="pop" id="tinybox_2"><a href="#" id="close_2">关闭二</a></div>
<script type="text/javascript">
BtPopShow("open_1","tinybox_1");
BtPopHide("close_1","tinybox_1")
BtPopShow("open_2","tinybox_2");
BtPopHide("close_2","tinybox_2")
</script>
</body>
</html>
友吧今天
运动首页v2设计完成。
发表评论