js弹出框、遮罩层、可拖动学习-阿里云开发者社区

解决弹出层定位滚动条scrollTop不兼容问题，即弹出层后滚动条不允许回到最上面，而是停在当前可见区域。

document.documentElement.scrollTop在ie中有值，但其他浏览器都为0；

document.body.scrollTop在ie中为0，其他浏览器都有值。

特别注意：不要这样调用<a href="#" onclick="openLoginBox()"></a>

应该：<a style="cursor:pointer" onclick="openLoginBox()">点击登录</a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>兼容性好的Js弹出框，完美拖拽</title>
<style>
<!--
body{
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<a style="cursor:pointer" onclick="openLoginBox()">点击登录</a>
<input type="button" onclick="openLoginBox()" value="登录" />
<div style="height:1200px;width:900px;background:#360"></div>
<input type="button" onclick="openLoginBox()" value="登录" />
<script type="text/javascript">
<!--
var openLoginBox=function(){ //调用
var cover=document.createElement('div');
cover.setAttribute('id','cover');
cover.style.width='100%';
cover.style.height=document.documentElement.scrollHeight+'px';
cover.style.background='#eee';
cover.style.position='absolute';
cover.style.left='0';
cover.style.top='0';
//cover.style.zIndex='99'; //设置元素的堆叠顺序，仅能在定位元素上奏效（例如 position:absolute;），该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
cover.style.opacity=0.7; //设置一个元素的透明度（ie6不支持），不可为负值。默认值为1不透明，0完全透明，精确度可以达到0.01
cover.style.filter='alpha(opacity=70)'; //ie6特别处理， Opacity代表透明度等级，100不透明，0完全透明
document.body.appendChild(cover); //【输出遮罩层】
var loginBox=document.createElement('div');
loginBox.setAttribute('id','loginBox');
loginBox.style.width='400px';
loginBox.style.height='250px';
loginBox.style.border='3px solid #f00';
loginBox.style.overflow='hidden'; //溢出就隐藏，不产生滚动条
loginBox.style.borderRadius='10px'; //弹出的div边框圆角
loginBox.style.boxShadow='0 0 19px #666666'; //弹出的div阴影
loginBox.style.position='absolute';
loginBox.style.left='50%';
loginBox.style.marginLeft='-200px'; //因为整个弹出的div宽400px，为了居中取一半
var scrolltopvalue; //浏览器滚动条离顶部距离（高度）
//alert(document.documentElement.scrollTop); //ie有值
//alert(document.body.scrollTop); //除了ie之外的浏览器有值
scrolltopvalue = document.documentElement.scrollTop + document.body.scrollTop; //解决浏览器兼容问题，不同浏览器这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。
var clientheightvalue;
clientheightvalue = document.documentElement.clientHeight; //打开网页可见区域高
loginBox.style.top = scrolltopvalue + (clientheightvalue - 250)/2 + 'px';
//loginBox.style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-250)/2+'px';
document.body.appendChild(loginBox); //【输出弹出框】
var loginBoxHandle=document.createElement('h1');
loginBoxHandle.setAttribute('id','loginBoxHandle');
loginBoxHandle.style.fontSize='14px';
loginBoxHandle.style.color='#c00';
loginBoxHandle.style.background='#f7dcdc';
loginBoxHandle.style.textAlign='left';
loginBoxHandle.style.padding='8px 15px';
loginBoxHandle.style.margin='0';
loginBoxHandle.innerHTML='用户登录<span onclick="closeLoginBox()" title="关闭" style="position:absolute; cursor:pointer; font-size:14px;right:8px; top:8px">×</span>';
loginBox.appendChild(loginBoxHandle); //【弹出层内容】
var iframe=document.createElement('iframe');
iframe.setAttribute('src','http://www.baidu.com');
iframe.setAttribute('frameborder','0');
iframe.setAttribute('scrolling','no');
iframe.setAttribute('width',400);
iframe.setAttribute('height',250);
loginBox.appendChild(iframe);
new dragDrop({
target:document.getElementById('loginBox'),
bridge:document.getElementById('loginBoxHandle')
});
}
var closeLoginBox=function(){ //【关闭弹出层】
var loginBox=document.getElementById('loginBox');
var cover=document.getElementById('cover');
document.body.removeChild(loginBox);
document.body.removeChild(cover);
}
/***************************************结束弹出层处理（下面是拖动处理）***********************************************/
/* new Dragdrop({
* target 拖拽元素 HTMLElemnt 必选
* bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
* dragX true/false false水平方向不可拖拽 (true)默认
* dragY true/false false垂直方向不可拖拽 (true)默认
* area [minX,maxX,minY,maxY] 指定拖拽范围默认任意拖动
* callback 移动过程中的回调函数
* });
*/
Array.prototype.max = function() {
return Math.max.apply({},this)
}
Array.prototype.min = function() {
return Math.min.apply({},this)
}
var getByClass=function(searchClass){
var tags = document.getElementsByTagName('*');
var el = new Array();
for(var i=0;i<tags.length;i++){
if(tags[i].className==searchClass){
el.push(tags[i])
};
}
return el
}
function dragDrop(option){
this.target=option.target;
this.dragX=option.dragX!=false;
this.dragY=option.dragY!=false;
this.disX=0;
this.disY=0;
this.bridge =option.bridge;
this.area=option.area;
this.callback=option.callback;
this.target.style.zIndex='0';
var _this=this;
this.bridge && (this.bridge.onmouseover=function(){ _this.bridge.style.cursor='move'});
this.bridge?this.bridge.onmousedown=function(e){ _this.mousedown(e)}:this.target.onmousedown=function(e){ _this.mousedown(e)}
}
dragDrop.prototype={
mousedown:function(e){
var ee=e||event;
var _this=this;
this.disX=e.clientX-this.target.offsetLeft;
this.disY=e.clientY-this.target.offsetTop;
this.target.style.cursor = 'move';
if(window.captureEvents){
e.stopPropagation();
e.preventDefault();}
else{
e.cancelBubble = true;
}
if(this.target.setCapture){
this.target.onmousemove=function(e){_this.move(e)}
this.target.onmouseup=function(e){_this.mouseup(e)}
this.target.setCapture()
}
else{
document.onmousemove=function(e){_this.move(e)}
document.onmouseup=function(e){_this.mouseup(e)}
}
},
move:function(e){
this.target.style.margin=0;
var ee=e||event;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var moveX=e.clientX-this.disX;
var moveY=e.clientY-this.disY;
if(this.area){
moveX < _this.area[0] && (moveX = this.area[0]); // left 最小值
moveX > _this.area[1] && (moveX = this.area[1]); // left 最大值
moveY < _this.area[2] && (moveY = this.area[2]); // top 最小值
moveY > _this.area[3] && (moveY = this.area[3]); // top 最大值
}
this.dragX && (this.target.style.left=moveX+'px');
this.dragY && (this.target.style.top=moveY+'px');
//限定范围
parseInt(this.target.style.top)<0 && (this.target.style.top=0);
parseInt(this.target.style.left)<0 && (this.target.style.left=0);
parseInt(this.target.style.left)>document.documentElement.clientWidth-this.target.offsetWidth&&(this.target.style.left=document.documentElement.clientWidth-this.target.offsetWidth+"px");
parseInt(this.target.style.top)>scrollTop+document.documentElement.clientHeight-this.target.offsetHeight && (this.target.style.top=scrollTop+document.documentElement.clientHeight-this.target.offsetHeight+'px');
if(this.callback){
var obj = {moveX:moveX,moveY:moveY};
this.callback.call(this,obj)
}
return false
},
mouseup:function (e)
{
var ee=e||event;
this.target.style.cursor = 'default';
var _this=this;
this.target.onmousemove=null;
this.target.onmouseup=null;
document.onmousemove=null;
document.onmouseup=null;
if(this.target.releaseCapture) {this.target.releaseCapture()}
}
}
//-->
</script>
</body>
</html>

本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/984397，如需转载请自行联系原作者

js弹出框、遮罩层、可拖动学习

热门文章

最新文章

相关课程

相关电子书

相关实验场景