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

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

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

隐藏侧栏
Beta
转载

javascript弹出层实例代码

       弹出层     2016-02-16     eycms     41     0    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w.org/1999/xhtml">

<head>

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

<title>弹窗</title>

<style type="text/css">

body{margin:0;padding:0;}

#bg{background:#000;position:absolute;left:0;top:0;filter:"Alpha(opacity=20)";opacity:0.2;display:none;}

#win{width:200px;height:200px;position:absolute;left:50%;top:50%;margin:-100px -100px 0;border:4px #F00 solid;background:#FFF;display:none;}

</style>

</head>


<body>

<a href="javascript:;" onclick="WinTip()">弹出</a>

<div id="bg"></div>

<div id="win"><a href="javascript:;" onclick="WinTip()">关闭</a></div>

</body>

<script type="application/javascript">

var $=function(id){return document.getElementById(id);}

function WinTip(){

var win=new WinSize();

var Tip=$("bg");

Tip.style.width=win.W+"px";

Tip.style.height=win.H+"px";

if(Tip.style.display=="block"){

Tip.style.display="none";

$("win").style.display="none";

}else{

Tip.style.display="block";

$("win").style.display="block";

}

}

function WinSize() //函数:获取尺寸

{

var winWidth = 0;

var winHeight = 0;

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)

{winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;}

return{"W":winWidth,"H":winHeight}

}

</script>

</html></td>

 </tr>

</table>


--结束END--

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

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

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

×

成为 亿搜云平台 代理商!

关注

微信
关注

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

亿搜云平台公众号

客服

联系
客服

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

联系客服:

在线QQ: 40819446

客服电话: 15250286283

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

工作时间:

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

WAP

手机
访问

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

亿搜云平台手机端