1. 程式人生 > >彈出圖層,可關閉(精簡推薦版)

彈出圖層,可關閉(精簡推薦版)

比較適合php 應用程式開發,彈出視窗可以關閉,視窗採用frame方法,frame能獲取連結所帶的引數,使用起來比較方便靈活。彈出視窗不能移動

<!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" />
<title>無標題文件</title>
<style type="text/css">
<!--
/* CSS Document */

*html #lite-overlay {
position:absolute;
}
.liteTitle {
height:30px;
line-height:30px;
text-indent:12px;
font-size:14px;
font-weight:bold;
background:#93C9FF;
position:relative;
color:#FFFFFF;

}
.liteClose {
height:30px;
line-height:30px;
cursor:pointer;
position:absolute;
right:15px;
top:0;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
#lite-content {
 background:#fff;
 position:absolute;
 top:50%;
 left:50%;
 z-index:0;
 display:none;
 border: 5px solid #93C9FF;
}
*html #lite-content {

position:absolute;
}
/*-- loading --*/
#liteloading {
position:absolute;
width:208px;
height:13px;
left:50%;
top:50%;
margin-left:-104px;
margin-top:-6px;
z-index:10000;
background: url(http://abc.158hh.com/images/loadingAnimation.gif) no-repeat;
}


#rbbox{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
position:absolute;right:0;bottom:0;width:200px;height:0px;overflow:hidden}
.button{display:inline;float:right;font-size:12px;cursor:pointer}
-->
</style>
<script type="text/javascript" src="ajax/jquery1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".liteBox").click(function(){$(this).liteBox();return false})});
function loadFrame(){$("#liteloading").remove();$("#lite-content").show();$("#liteFrame").contents().find(".liteClose").click(function(){$("#lite-overlay").remove();
                                           $("#lite-content").remove()})}$.fn.liteBox=function(){function a(k){var l={};if(!k){return l}var g=k.split(/[;&]/);for(var j=0;j<g.length;j++){var n=g[j].split("=");
if(!n||n.length!=2){continue}var h=unescape(n[0]);var m=unescape(n[1]);m=m.replace(//+/g," ");
l[h]=m}return l}var b=$(this).attr("href");
var f=b.split("#");var e=b.replace(/^[^/#]+/##/,"");
var c=a(e);
var d=$(this).attr("title");liteWidth=c.width*1;liteHeight=c.height*1;liteId=c.id;liteCaption=c.caption;liteScroll=c.scroll;if(typeof liteScroll=="undefined"){liteScroll="no"}marginLeft=-liteWidth/2;marginTop=-liteHeight/2;$liteOverlay="<div id='lite-overlay'><div id='liteloading'></div></div>";$liteContent="<div id='lite-content' style='width:"+liteWidth+"px;height:"+(liteHeight+30)+"px;margin-left:"+marginLeft+"px;margin-top:"+marginTop+"px;width:"+(liteWidth)+"px;'><div class='liteTitle'>"+d+"</div><div class='liteClose'>/u5173/u95ed</div><iframe id='liteFrame' src='"+f[0]+"'   style='width:"+liteWidth+"px;height:"+liteHeight+"px;' frameborder='0' scrolling='"+liteScroll+"' onload='loadFrame()' ></iframe></div>";$("body").append($liteOverlay);$("#lite-overlay").append($liteContent);$(".liteClose").click(function(){$("#lite-overlay").remove();$("#lite-content").remove()})};

</script>
</head>

</html>

如果要在其呼叫的子頁面裡面加入“關閉視窗按鈕”,按鈕需要加上class='liteClose'