Jquery CSS实现的底部，左面，右面动态弹出框。弹出框里面的内容需要自定义哈。

1.左边弹出框：

CSS

/*侧边栏左弹出框*/
.boxLeft{
	position:absolute;
	width:400px;
	height:200px;
	border:1px solid #ccc;
	top:300px;
	 -webkit-box-shadow: 0px 0px 8px #ccc;  
    -moz-box-shadow: 0px 0px 8px #ccc;  
    box-shadow: 0px 0px 8px #ccc;  
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	border-radius:0 5px 5px 0;
}
.leftTitle{
	height:200px;
	float:right;
	width:40px;
	background-color:#efefef;
	-webkit-border-radius:0 5px 5px 0;
	-moz-border-radius:0 5px 5px 0;
	border-radius:0 5px 5px 0;
}
.leftTitle>h3{
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	width:20px;
	margin-left:10px;
}
.boxLeftContext{
	float:left;
	width:350px;
	height:200px;
}

Jq

function LeftOne(){
	 $(".boxLeft").css("left",-360 "px");
	 $(".boxLeft").hover(function(){
		 $(this).animate({left:0 "px"},300);
	 },function(){
		  $(this).animate({left:-360 "px"},300);
	});
}

2.右边弹出框

CSS

.box{
	position:absolute;
	width:300px;
	height:200px;
	border:1px solid #ccc;
	left:100%;
	top:300px;
	 -webkit-box-shadow: 0px 0px 8px #ccc;  
    -moz-box-shadow: 0px 0px 8px #ccc;  
    box-shadow: 0px 0px 8px #ccc;  
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	border-radius:5px 0 0 5px;

}
.RightTitle{
	height:200px;
	float:left;
	width:40px;
	background-color:#efefef;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius:5px 0 0 5px;
	border-radius:5px 0 0 5px;
}
.RightTitle>h3{
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	width:20px;
	margin-left:10px;
}
.context{
	float:left;
	border-bottom:1px solid #ccc;
	width:258px;
	height:100px;
}
a{
	font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
	color:#808080;
	text-decoration:none;
}

Jq

function RightOne(){
	 $(".box").css("left",$(window).width()-35 "px");
	 $(".box").hover(function(){
		 $(this).animate({left:$(window).width()-300 "px"},300);
	 },function(){
		  $(this).animate({left:$(window).width()-35 "px"},300);
	});
}

3.底部弹出框

CSS

.msg{
	width:300px;
	height:350px;	display:none;
	right:100px;
	border:1px solid #ccc;
	position:absolute;
	 -webkit-box-shadow: 0px 0px 8px #ccc;  
    -moz-box-shadow: 0px 0px 8px #ccc;  
    box-shadow: 0px 0px 8px #ccc;  
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
}
.msgTitle{
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	width:100%;
	height:30px;
	background-color:#efefef;

}
.msgTitle>h3{
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	margin:0;
	padding:5px 0 0 5px;
}
.msgClose{
	float:right;
	margin-right:10px;
	cursor:pointer;
}
.msgClose:hover{
	color:#ff5500;
}
.msgMain{
	width:100%;
	height:300px;
	overflow:hidden;
}

Jq

/*底部弹出框*/
function Bottom(){
	$(".msg").css("top",$(window).height() "px").css("display","block");
	$(".msg").animate({top:$(window).height()-350 "px"},500);
	$(".msgClose").click(function(){$(this).animate({top:$(window).height() "px"},500,function(){$(".msg").css("display","none");});});
}