简易javascript遮罩层提示框
2013-12-03 00:00
274 查看
//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' onclick='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;
}
//简易可移动遮罩层
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' onclick='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 7fe0 = "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'); } }
}
相关文章推荐
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa
- javascript asp教程第十一课--Application 对象
- javascript 获取特定的 CSS属性值
- JAVASCRIPT IE 与 FF 中兼容写法记录
- javascript横排竖排标准选项卡效果代码
- javascript prototype,executing,context,closure
- javascript实现的树型下拉框改进版
- 比较简洁的JavaScript 实时显示时间的脚本 修正版