window.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=utf-8" />
<title>jquery实现弹框效果</title>
</head>
<link type="text/css" href="window.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
//居中效果
$("#btn_center").click(function (){
$(window).scroll(function (){
popCenterwindow();
});
});
//弹框左下角效果
$("#btn_left").click(function (){
$(window).scroll(function (){
popLeftBottomWindow();
});
});
//弹框左下角效果
$("#btn_right").click(function (){
$(window).scroll(function (){
popRightBottomWindow();
});
});
});
</script>
<body>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<input type="button" value="弹出居中框" id="btn_center">
<input type="button" value="弹出居左下角框" id="btn_left">
<input type="button" value="弹出居右下角框" id="btn_right">
<div id="center" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居中</div>
<div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
<div id="left" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居左</div>
<div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
<div id="right" class="tan_window">
<div class="title"><img src="x.jpg">简单工作室欢迎你-居右</div>
<div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
</body>
</html>
2、window.js文件
//定义浏览器的高度
var windowHeight;
//定义浏览器的宽度
var windowWidth;
//定义弹框的高度
var popHeight;
//定义弹框的宽度
var popWidth;
//获取滚动条的高度
var scrollTop;
//获取滚动条的宽度
var scrollLeft;
//延迟时间
var timeout;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".tan_window").height();
popWidth=$(".tan_window").width();
scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();
};
//定义关闭窗口的函数
function closeWindow(){
$(".title img").click(function (){
$(this).parent().parent().hide("slow");
});
};
//定义弹出居中窗口的操作
function popCenterwindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeight-popHeight)/2+scrollTop;
var popX=(windowWidth-popWidth)/2+scrollLeft;
$("#center").animate({top:popY,left:popX},300).show("slow");
},300);
//关闭窗口
closeWindow();
};
//弹出居左下角框
function popLeftBottomWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight+scrollTop-10;
var popX=scrollLeft-10;
$("#left").animate({top:popY,left:popX},300).show("slow");
},300);
//关闭窗口
closeWindow();
};
//弹出居右下角
function popRightBottomWindow(){
//每次之前清除掉
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight+scrollTop-10;
var popX=windowWidth+scrollLeft-popWidth-10;
//$("#right").css("top",popY).css("left",popX).show("slow");
$("#right").animate({top:popY,left:popX},300).show("slow");
//关闭窗口
},300);
closeWindow();
};
3、window.css文件
.tan_window{background-color:#0F9;
width:230px;
padding:2px;
margin:5px;
display:none;
position:absolute;
}
.title{
padding:2px;
font-size:14px;
color:#C09;}
.content{
width:220px;
height:150px;
background-color:#FFF;
font-size:14px;
padding:2px;
overflow:auto;
}
.title img{
float:right;
cursor:pointer;}