弹出图层，可关闭（精简推荐版）

最新推荐文章于 2024-05-11 19:11:00 发布

找到快乐的根源

最新推荐文章于 2024-05-11 19:11:00 发布

阅读量1k

点赞数

分类专栏： ajax+jquery+js系列文章标签： function class html xhtml div 程序开发

本文链接：https://blog.csdn.net/k8080880/article/details/6102743

版权

ajax+jquery+js系列专栏收录该内容

110 篇文章 0 订阅

订阅专栏

比较适合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+"' οnlοad='loadFrame()' ></iframe></div>";$("body").append($liteOverlay);$("#lite-overlay").append($liteContent);$(".liteClose").click(function(){$("#lite-overlay").remove();$("#lite-content").remove()})};

</script>
</head>

<body>
<a href="http://www.sina.com?#&height=400&width=500&scroll=yes" class="liteBox" title="新浪网页">点击这里测试
</a>
</body>

</html>

如果要在其调用的子页面里面加入“关闭窗口按钮”，按钮需要加上class='liteClose'