欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

js精美的弹出层效果代码

       弹出层     2016-02-16     eycms     54     0    

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>cwx - 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:400px; height:300px;}

</style>

</head>


<body>

<!--弹出窗-->

<div class="mybody">

<div class="botton" id="testClick">点击测试</div>

        asdasdasdasdasdasdasd<br/>asdasdasdasdasd

        <div class="botton" id="testClick1">点击测试</div>

    </div>

    <script type="text/javascript">

    C$('testClick').onclick = function(){

var neirong = '<div><img  src="http://filesimg.1XX.cn.net/2013/05/06/20130506123246475.png" 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></td>

 </tr>

</table>


--结束END--

本文链接: http://www.eycms.cn/resources/popup/1146.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端