经常看到别的网站上那种点击一个按钮，在网页中间会弹出一个窗口，同时背景变暗的效果，觉得酷酷的。
今天我也写了个，
首先看效果
我想发扬拿来主义精神 点击下载 弹出窗口,背景变暗js特效
我把ajax的代码给注释掉了，如果你想在弹出的窗口中从另一个网页上加载内容你可以启用注释掉的加红代码的部分，
如果你弹出窗口的内容比较单一的话，可以直接在js里定义内容，或用iframe把内容包含进来
下面是代码
html文件
| 以下为引用的内容： <!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; 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> |
| 以下为引用的内容： function create_bg(){ var bg=document.createElement("DIV"); 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>'; 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的方式加载数据我把他注释掉了, //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); // } |