博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简易javascript遮罩层提示框
阅读量:6157 次
发布时间:2019-06-21

本文共 5304 字,大约阅读时间需要 17 分钟。

  hot3.png

//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');		}	}

}

转载于:https://my.oschina.net/sinalb/blog/181224

你可能感兴趣的文章
原创:goldengate从11.2升级到12.1.2
查看>>
Quartz
查看>>
正则表达式的语法规则
查看>>
C#一个关于委托和事件通俗易懂的例子
查看>>
类似于SVN的文档内容差异对比工具winmerge
查看>>
Cause: java.sql.SQLException: The user specified as a definer ('root'@'%') does not exist
查看>>
quratz线程
查看>>
execnet: rapid multi-Python deployment
查看>>
windows修改3389端口
查看>>
关于JavaScript词法
查看>>
FreeSwitch中的会议功能(4)
查看>>
MySQL中创建用户分配权限(到指定数据库或者指定数据库表中)
查看>>
AutoReleasePool 和 ARC 以及Garbage Collection
查看>>
重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
查看>>
乐在其中设计模式(C#) - 提供者模式(Provider Pattern)
查看>>
MVP Community Camp 社区大课堂
查看>>
GWT用frame调用JSP
查看>>
大型高性能ASP.NET系统架构设计
查看>>
insert select带来的问题
查看>>
EasyUI 添加tab页(iframe方式)
查看>>