设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 窗口特效 > 详细内容
点击弹出窗口层,并且背景变暗渐变
发布时间:2010-3-28  阅读次数:8681  字体大小: 【】 【】【

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
<!-- meta data -->
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="在远方@www.jscode.cn" />
<meta name="Copyright" content="Copyright (c) jscode.cn" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页特效观止" />
<meta name="keywords" content="网页特效,网页特效代码" />
<!-- site title -->
<title>点击弹出窗口层,并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码</title>
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
       z-index:10001;
       width:500px;
       height:400px;
       background:white;
       border:#336699 1px solid;
       position:absolute;
       left:50%;
       top:20%;
       font-size:12px;
       margin-left:-225px;
       display: none;
}
#bgDiv {
       display: none;
       position: absolute;
       top: 0px;
       left: 0px;
       right:0px;
       background-color: #777;
       filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
       opacity: 0.6;
}
</style>
<script type="text/javascript">
function showDetail() { //在远方www.jscode.cn
//背景
   var bgObj=document.getElementById("bgDiv");
   bgObj.style.width = document.body.offsetWidth + "px";
   bgObj.style.height = screen.height + "px";

//定义窗口
   var msgObj=document.getElementById("msgDiv");
   msgObj.style.marginTop = -75 +   document.documentElement.scrollTop + "px";

//关闭
   document.getElementById("msgShut").onclick = function(){
   bgObj.style.display = msgObj.style.display = "none";
   }
   msgObj.style.display = bgObj.style.display = "block";
   msgDetail.innerHTML="<p align=center>小窗口里的内容</p><p align=center><A href=http://www.jscode.cn><FONT color=#0000ff>网页特效观止</FONT></A></p>"
}
</script>
</head>

<body>

<div id="msgDiv">
  <div id="msgShut">
    关闭</div>
  <div id="msgDetail">
  </div>
</div>
<div id="bgDiv">
</div>
<p> </p>
<p><a href="#" onClick="showDetail()">点击我试试看</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>

</body>

</html>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

上一篇:没有了! 下一篇:IE6SP2下的另类无边弹出窗口
我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮