//libo/2013/12/03 //简易可移动遮罩层 var pop = { bodyDiv : '', quyuheight : '', quyuwidth : '', boxDivTop : '', boxDivleft : '', hidenWidth : 450, hidenHeight: 350, title : ' 温馨提示', data : 'ffd', setBody : function(){ pop.bodyDiv = document.createElement('div'); pop.bodyDiv.setAttribute('id','bgDiv'); pop.bodyDiv.style.position = "absolute"; pop.bodyDiv.style.top = "0"; pop.bodyDiv.style.background = "#000000"; pop.bodyDiv.style.opacity = "0.4"; pop.bodyDiv.style.filter = "alpha(opacity=30)"; pop.bodyDiv.style.left = "0"; //可见区域宽度 pop.quyuwidth = Math.max(document.documentElement.clientWidth, document.body.clientWidth); //可见区域高度 pop.quyuheight = Math.max(document.documentElement.clientHeight, document.body.clientHeight); pop.bodyDiv.style.width = pop.quyuwidth + "px"; pop.bodyDiv.style.height = pop.quyuheight + "px"; pop.bodyDiv.style.zIndex = "10000"; document.body.appendChild(pop.bodyDiv); }, //遮罩层创建 creatbox : function(){ var boxDiv = document.createElement('div'); boxDiv.setAttribute('id','boxDiv'); boxDiv.style.position = "absolute"; boxDiv.style.zIndex = "10100"; boxDiv.style.background = "#fff"; boxDiv.style.border = "5px solid #333333"; boxDiv.style.height = pop.hidenHeight + 'px'; boxDiv.style.width = pop.hidenWidth + 'px'; boxDiv.innerHTML = "<div id='boxTop' style='width:100%;height:30px;line-height:30px;border-bottom:1px solid #999999;background-color:#cccccc;'>"+ "<ul>"+ "<li style='height:30px;line-height:35px;width:80%;text-align:left;font-size:12px;color:#000000;cursor:move;float:left;'>"+pop.title+"</li>"+ "<li style='height:30px;line-height:35px;width:19%;text-align:right;float:left;'>"+ "<a href='javascript:;' style='color:red;font-size:12px;text-decoration:none' οnclick='pop.colose()'>关闭</a>"+ "</li></ul>"+ "</div>"+ "<div id='boxCenter' style='width:100%;margin-top:5px;font-size:12px;height:auto;'>"+ pop.data +"</div>"; //返回当前屏幕高度(分辨率值) var pingmu = window.screen.height; if (pingmu < pop.quyuheight) { pop.boxDivTop = (pingmu - pop.hidenHeight)/3 + 'px'; } else { pop.boxDivTop = (pingmu - pop.hidenHeight)/3 + 'px'; } pop.boxDivleft = (pop.quyuwidth - pop.hidenWidth)/2; boxDiv.style.left = pop.boxDivleft + 'px'; boxDiv.style.top = pop.boxDivTop;
document.body.appendChild(boxDiv);
},
//Y坐标滚动条事件动作,保持遮罩层在中央
scrolled : function(){
var topScroll = '';
var topTmp = parseInt(pop.boxDivTop);
if (document.documentElement && document.documentElement.scrollTop) {
topScroll = parseInt(document.documentElement.scrollTop);
} else if (document.body) {
topScroll = parseInt(document.body.scrollTop);
}
document.getElementById('boxDiv').style.top = (topTmp + topScroll) + 'px';
},
//绑定滚动条事件
bindScroll : function(){
if (document.all) {
window.attachEvent('onscroll', pop.scrolled);
} else {
window.addEventListener('scroll', pop.scrolled);
}
},
lt : function () {
return {
left : document.documentElement.scrollLeft ||document.body.scrollLeft,
top : document.documentElement.scrollTop || document.body.scrollTop
};
},
//弹出框移动事件
moved:function(o, mvObj){
var lt = pop.lt(), d = document;
if (typeof o == 'string') {
o = document.getElementById(o);
}
if (typeof mvObj == 'string') {
mvObj = document.getElementById(mvObj);
}
o.orig_x = parseInt(o.style.left) - lt.left;
o.orig_y = parseInt(o.style.top) - lt.top;
mvObj.onmousedown = function () {
d.onmousedown = function (e) {
e = e || window.event;
var x = e.clientX + lt.left - o.offsetLeft;
var y = e.clientY + lt.top - o.offsetTop;
d.ondragstart = "return false;";
d.onselectstart = "return false;";
d.onselect = "document.selection.empty();";
d.onmousemove = function (e) {
e = e || window.event;
var _left = e.clientX + lt.left - x;
var _top = e.clientY + lt.top - y;
//阻止弹出框移出网页可视化区域
if(_left < 0) {
_left = 0;
}
if(_top < 0) {
_top = 0;
}
if (( pop.hidenWidth + _left) >= pop.quyuwidth) {
_left = pop.quyuwidth - (pop.hidenWidth + 20);
}
o.style.left = _left + 'px';
o.style.top = _top + 'px';
o.orig_x = parseInt(o.style.left) - lt.left;
o.orig_y = parseInt(o.style.top) - lt.top;
};
d.onmouseup = function() {
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
d.onmousedown = null;
};
}
}
},
colose : function(){
if (document.all) {
window.detachEvent('onscroll', pop.scrolled);
} else {
window.removeEventListener('scroll', pop.scrolled);
}
var obj1= document.getElementById('boxDiv');
var obj2= document.getElementById('bgDiv');
obj1.innerHTML = '';
obj2.innerHTML = '';
var parent1 = obj1.parentNode;
var parent2 = document.body;
parent1.removeChild(obj1);
parent2.removeChild(obj2);
},
/*
* height:遮罩层高度
* width:遮罩层宽度
* titlet:遮罩层标题
* msg : 遮罩层内容
* move : 是否可移动
*/
box : function(obj){
if (obj.height) {
pop.hidenHeight = obj.height;
}
if (obj.width) {
pop.hidenWidth = obj.width;
}
if (obj.title) {
pop.title = obj.title;
}
if (obj.msg) {
pop.data = obj.msg;
}
pop.setBody();
pop.creatbox();
pop.bindScroll();
if (obj.move) {
pop.moved('boxDiv', 'boxTop');
}
}
}