JAVASCRIPT之弹出层、弹窗效果+拖曳功能

最新推荐文章于 2022-11-20 20:42:32 发布

相思比梦长

最新推荐文章于 2022-11-20 20:42:32 发布

阅读量724

点赞数 1

分类专栏： WEB前端文章标签： JAVASCRIPT 弹出层弹窗效果拖曳功能

本文链接：https://blog.csdn.net/netuser1937/article/details/54966631

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JAVASCRIPT之弹出层、弹窗效果+拖曳功能</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-size: 12px;
	font: Arial, Helvetica, sans-serif;
	margin: 25PX 0PX;
	background: #eee;
}
.botton {
	color: #F00;
	cursor: pointer;
}
.mybody {
	width: 600px;
	margin: 0 auto;
	height: 1500px;
	border: 1px solid #ccc;
	padding: 20px 25px;
	background: #fff
}
#cwxBg {
	position: absolute;
	display: none;
	background: #000;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1000;
}
#cwxWd {
	position: absolute;
	display: none;
	border: 10px solid #CCC;
	padding: 10px;
	background: #FFF;
	z-index: 1500;
}
#cwxCn {
	background: #FFF;
	display: block;
}
.imgd {
	width: 256px;
	height: 256px;
}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
  <div class="botton" id="testClick">图片测试</div>
  <div class="botton" id="testClick1">文字测试</div>
</div>
<script type="text/javascript"> 
C$('testClick').onclick = function(){ 
var neirong = '<div><img src="http://www.99danji.com/uploadfile/2015/0623/20150623054920688.png" class="imgd" /></div>'; 
cwxbox.box.show(neirong); 
} 
C$('testClick1').onclick = function(){ 
var neirong = '文字测试--文字测试'; 
cwxbox.box.show(neirong,3); 
} 

function C$(id){return document.getElementById(id);} 
//定义窗体对象 
var cwxbox = {}; 

cwxbox.box = function(){ 
var bg,wd,cn,ow,oh,o = true,time = null; 
return { 
show:function(c,t,w,h){ 
if(o){ 
bg = document.createElement('div'); bg.id = 'cwxBg'; 
wd = document.createElement('div'); wd.id = 'cwxWd'; 
cn = document.createElement('div'); cn.id = 'cwxCn'; 
document.body.appendChild(bg); 
document.body.appendChild(wd); 
wd.appendChild(cn); 
bg.onclick = cwxbox.box.hide; 
window.onresize = this.init; 
window.onscroll = this.scrolls; 
o = false; 
} 
if(w && h){ 
var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>'; 
}else{ 
var inhtml = c; 
} 
cn.innerHTML = inhtml; 
oh = this.getCss(wd,'offsetHeight'); 
ow = this.getCss(wd,'offsetWidth'); 
this.init(); 
this.alpha(bg,50,1); 
this.drag(wd); 
if(t){ 
time = setTimeout(function(){cwxbox.box.hide()},t*1000); 
} 
}, 
hide:function(){ 
cwxbox.box.alpha(wd,0,-1); 
clearTimeout(time); 
}, 
init:function(){ 
bg.style.height = cwxbox.page.total(1)+'px'; 
bg.style.width = ''; 
bg.style.width = cwxbox.page.total(0)+'px'; 
var h = (cwxbox.page.height() - oh) /2; 
wd.style.top=(h+cwxbox.page.top())+'px'; 
wd.style.left=(cwxbox.page.width() - ow)/2+'px'; 
}, 
scrolls:function(){ 
var h = (cwxbox.page.height() - oh) /2; 
wd.style.top=(h+cwxbox.page.top())+'px'; 
}, 
alpha:function(e,a,d){ 
clearInterval(e.ai); 
if(d==1){ 
e.style.opacity=0; 
e.style.filter='alpha(opacity=0)'; 
e.style.display = 'block'; 
} 
e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40); 
}, 
ta:function(e,a,d){ 
var anum = Math.round(e.style.opacity*100); 
if(anum == a){ 
clearInterval(e.ai); 
if(d == -1){ 
e.style.display = 'none'; 
if(e == wd){ 
this.alpha(bg,0,-1); 
} 
}else{ 
if(e == bg){ 
this.alpha(wd,100,1); 
} 
} 
}else{ 
var n = Math.ceil((anum+((a-anum)*.5))); 
n = n == 1 ? 0 : n; 
e.style.opacity=n/100; 
e.style.filter='alpha(opacity='+n+')'; 
} 
}, 
getCss:function(e,n){ 
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null); 
if(e_style.display === 'none'){ 
var clonDom = e.cloneNode(true); 
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;'; 
document.body.appendChild(clonDom); 
var wh = clonDom[n]; 
clonDom.parentNode.removeChild(clonDom); 
return wh; 
} 
return e[n]; 
}, 
drag:function(e){ 
var startX,startY,mouse; 
mouse = { 
mouseup:function(){ 
if(e.releaseCapture) 
{ 
e.οnmοusemοve=null; 
e.οnmοuseup=null; 
e.releaseCapture(); 
}else{ 
document.removeEventListener("mousemove",mouse.mousemove,true); 
document.removeEventListener("mouseup",mouse.mouseup,true); 
} 
}, 
mousemove:function(ev){ 
var oEvent = ev||event; 
e.style.left = oEvent.clientX - startX + "px"; 
e.style.top = oEvent.clientY - startY + "px"; 
} 
} 
e.onmousedown = function(ev){ 
var oEvent = ev||event; 
startX = oEvent.clientX - this.offsetLeft; 
startY = oEvent.clientY - this.offsetTop; 
if(e.setCapture) 
{ 
e.οnmοusemοve= mouse.mousemove; 
e.οnmοuseup= mouse.mouseup; 
e.setCapture(); 
}else{ 
document.addEventListener("mousemove",mouse.mousemove,true); 
document.addEventListener("mouseup",mouse.mouseup,true); 
} 
} 

} 
} 
}() 

cwxbox.page = function(){ 
return{ 
top:function(){return document.documentElement.scrollTop||document.body.scrollTop}, 
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}, 
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}, 
total:function(d){ 
var b=document.body, e=document.documentElement; 
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)): 
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth)) 
} 
} 
}() 
</script>
</body>
</html>