软件开发培训班 >> 编程开发 >> JavaScript

js点击弹出div层实现可拖曳的弹窗效果

　　本文标签：div层,拖曳,弹窗

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>弹出层、弹窗效果+拖曳功能 </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:400px; height:300px;} 
</style> 
</head> 
<body> 
 
<div class="mybody"> 
<div class="botton" id="testClick">点击测试</div> 
asdasdasdasdasdasdasd
这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div> 
</div> 
<script type="text/javascript"> 
C$(testClick).onclick = function(){ 
var neirong = <div><img src="/images/logo.gif" class="imgd" /></div>; 
cwxbox.box.show(neirong); 
} 
C$(testClick1).onclick = function(){ 
var neirong = 123456789132456789; 
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.onmousemove=null; 
e.onmouseup=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.onmousemove= mouse.mousemove; 
e.onmouseup= 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>

技术文章快速查找

javascript获得CheckBoxList选中的数量

利用jQuery 实现GridView异步排序、分页的代码

JQuery 表单中textarea字数限制实现代码

javascript 大中小字体显示实现代码

让FireFox支持innerText的实现代码

js新闻滚动 js如何实现新闻滚动效果

基于jquery的划词搜索实现（备忘）

JavaScript中的字符串操作详解

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建