RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站
 当前位置:主页 >> 网页制作 >> JS >> 文章内容
弹出窗口,背景变暗js效果
来源:www.phperz.com  作者:本站原创  发布时间:2008-05-30

经常看到别的网站上那种点击一个按钮,在网页中间会弹出一个窗口,同时背景变暗的效果,觉得酷酷的。
今天我也写了个,
首先看效果 www~phperz~com

我想发扬拿来主义精神 点击下载 弹出窗口,背景变暗js特效

 
我把ajax的代码给注释掉了,如果你想在弹出的窗口中从另一个网页上加载内容你可以启用注释掉的加红代码的部分,
如果你弹出窗口的内容比较单一的话,可以直接在js里定义内容,或用iframe把内容包含进来
下面是代码
html文件
以下为引用的内容:
www.phperz.com

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" src="showbg.js"></script>
<title>www.phperz.com PHP程序员站</title>
<style type="text/css">
body{
margin:0}
.showbg_bg{
background:#234f74;filter:Alpha(opacity=40);-moz-opacity: 0.4;z-index:81;}
#showbg_showbg{
top:50%;
left:50%;
margin:-300px 0 0 -306px;
width:612px;
height:600px;
background-color:#FFf;
z-index:82;
position:absolute;
border:1px solid #CAD9EA;
}
.showbg_top_bg{
text-align:right; php程序员之家
height:31px;
background:url(showbg_top_bg.gif);
background-repeat:repeat-x;
width:100%;
border-bottom:1px solid #CAD9EA;
}
</style>
</head>
<body>
<br />
<span style="padding-left:20px;cursor:pointer" onClick="show('a.html')">点击</span><br />  //show函数里的a.html可有可无,你可以把他当成ajax加载的文件地址传给他.
</body>
</html>

js代码
以下为引用的内容:
function create_bg(){
 var bg=document.createElement("DIV");
www.phperz.com

 document.body.style.overflow="hidden";
    document.documentElement.style.overflow = "hidden";  //隐藏滚动条
 with(bg.style){
  position="absolute";
  top="0px";
  left="0px";
  width=document.documentElement.scrollWidth;
  height=document.documentElement.scrollHeight+1000;
  backgroundImage="url(bg.gif)";  //遮住背景的图片
  }
 bg.className="showbg_bg";
 bg.id="showbg_bg";
 document.body.appendChild(bg);
 }
function show(filepath){
 create_bg();
 var showbg=document.createElement("DIV")
 showbg.id="showbg_showbg";
 var html="";
 html='<div class="showbg_top_bg"><div style="padding-top:5px;padding-right:10px;font-size:14px;cursor:pointer;" onclick="close_showbg()">X</div></div>'; www~phperz~com
 html+='<div id="showbg_content"><div style="height:50px;text-align:center;margin-top:150px;">';
 html+='这里弹出的窗口里的内容<br>欢迎光临PHP程序员站请记住本站域名www.phperz.com'; //如果你想用ajax方式从别的文件里加载内容,此处可以放一个loading图片
 html+='</div></div>'
 showbg.innerHTML=html;
 document.body.appendChild(showbg);
 //loadfile(filepath); //如果你想用ajax方法调用内容这里可以放内容的来源地址
 }
function close_showbg(){
 var showbg_bg=document.getElementById("showbg_bg");
 var showbg_showbg=document.getElementById("showbg_showbg");
 showbg_bg.parentNode.removeChild(showbg_bg);
 showbg_showbg.parentNode.removeChild(showbg_showbg);
 document.documentElement.style.overflow = "";
 }
//下面是ajax的方式加载数据我把他注释掉了,
www.phperz.com

//function loadfile(filepath){
// var getDataObj=myRequestObj();
// getDataObj.open("GET",filepath,true);
// getDataObj.onreadystatechange=function (){
// //alert(getDataObj.readystate);
// if (getDataObj.readystate==4){
//  if (getDataObj.status==200) {
//   document.getElementById("showbg_content").innerHTML=getDataObj.responseText;
//   }
//  else{
//   document.getElementById("showbg_content").innerHTML="Error";
//   }
//  }
// else {
//  document.getElementById("showbg_content").innerHTML='<div style="height:50px;text-align:center;margin-top:150px;"><img src="/img/loading.gif"></div>';
//  }
//  }
// getDataObj.send(null);
// }
www.phperz.com

我想发扬拿来主义精神 点击下载 弹出窗口,背景变暗js特效
 相关文章
 
发表评论
全部评论(0条)
 站内搜索
 热门搜索 mysql  基础  adodb  url
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长