实现可拖曳、可关闭的弹窗效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】实现可拖曳、可关闭的弹窗效果

作者:雨秋 / 发布于2015/9/28/ 624

运行该实例，点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦。


	<!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<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div>
	</div>
	<script type="text/javascript">
	 C$('testClick').onclick = function(){
	 var neirong = '<div><img src="http://www.jb51.net/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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　可拖曳　　可关闭　　弹窗　

同语言下

可能有用的

雨秋贡献的其它代码(12)