制作弹出层 博客分类： web前端 CSSWeb

//最近在做一个公司博客，页面上用到了很多弹出层，于是大家就仿照着其他网站上的弹出层做了一个。
<script type="text/javascript" src="/blogsystem/web/common/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/blogsystem/web/common/js/jquery-ui-1.7.2.custom.min.js"></script>

<!--弹出层-->
<div id="background"></div>
<div id="outDiv">
    <div id="outTitle">
         <span id="titleLayer">提示</span>
         <div id="closeLayer" class="closeLayer"></div>
    </div>
    <div id="outContent">
    	 <img src="/blogsystem/web/image/album_wen.gif" align="middle"/>确定要删除此好友吗？
    </div>
    <div id="outBottom">
         <input type="submit" value="确认" onclick="delFriends('<s:property value="#del"/>')"/>　　
         <input type="button" value="取消"  class="closeLayer"/>
    </div>
</div>

//页面弹出层样式
	
#background{
	position:absolute;
	background-color:#F6F6F6; 
	z-index:99; 
	left:0; 
	top:0; 
	display:none;
	width:100%;
	height:100px;
	opacity:0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}
#outDiv{
	position:absolute;
	width:300px; 
	height:200px;
	left:50%; 
	top:50%; 
	z-index:100;
	background:#FFF; 
	border:1px #D8D8D8 solid; 
	display:none;
}
#outTitle{
	position:absolute; 
	width:100%;
	height:35px; 
	font-size:14px;
	background: url(/blogsystem/web/image/component.gif);
	line-height:18px;
}
#titleLayer{
	width: 60px;
    margin-top: 1px;
	margin-left:5px;
    font-weight: bold;
    float: left;
}
#closeLayer{
	position:relative;
	margin-top:7px;
	margin-right:7px;
	float:right;
	width:7px;
	height:10px;
	cursor:pointer;
	background:url(/blogsystem/web/image/head_close.gif) 0px -6px;
}
#outContent{
	position:absolute;
	width:100%;
	height:60px;
	top:50px;
	text-align:center;
	font-size:14px; 
	background:#FFF;
}
#outBottom{
	position:absolute;
	top:150px;
	width:100%;
	text-align:center;
}
#outDiv input{
	background: url(/blogsystem/web/image/head_component.png);
	width:80px;
	height:25px;
	cursor:pointer;
	border:0;
}

 //页面弹出层
$(function(){
	 $(".but").click(function(){
	       $(function(){
			 $("#outDiv").draggable();
		   })    
			$("#background").css({display:"block",height:$(document).height()});
			var yscroll =document.documentElement.scrollTop;
			$("#outDiv").css("top","100px");
			$("#outDiv").css("display","block");
			document.documentElement.scrollTop=0;
	       });       
			$(".closeLayer").click(function(){
				$("#background").css("display","none");
				$("#outDiv").css("display","none");
			});				
        })
 //删除好友
function delFriends(url){
        window.location.href=url;
}