//html 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet"type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script src="window.js" type="text/javascript"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
.window{
width:250px;
background-color:#d0def0;
padding: 2px;
margin: 5px;
position:absolute;
display: none;
}
.title{
font-size:15px;
padding: 3px;
}
.title img{
float: right;
cursor:pointer;
}
.content{
font-size:15px;
height: 150px;
background-color: #fff;
padding: 2px;
}
</style>
<script type="text/javascript">
//按钮的单击事件
$(document).ready(function(){
$("#btm2").click(function(){
$(window).scroll(function(){
popCenterWindow();
});
});
$("#btm1").click(function(){
$(window).scroll(function(){
popLeftWindow();
});
});
$("#btm3").click(function(){
$(window).scroll(function(){
popRightWindow();
});
});
});
</script>
</head>
<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><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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="button" value="弹出左" id="btm1"/>
<input type="button" value="弹出中" id="btm2"/>
<input type="button" value="弹出右" id="btm3"/>
<div id="center" class="window">
<div class="title">居中csdn欢迎你<img src="images/close.gif"/> </div>
<div class="content">csdn呵呵真好<br></div>
</div>
<div id="left" class="window">
<div class="title">csdn欢迎你<img src="images/close.gif"/></div>
<div class="content">csdn呵呵真好</div>
</div>
<div id="right" class="window">
<div class="title">csdn欢迎你<img src="images/close.gif"/></div>
<div class="content">csdn呵呵真好</div>
</div>
</body>
</html>
//窗口的宽度
var windowWidth;
var windowHeight;
var popHeight;
var popWidth;
//获得滚动条的滚动距离
var scollTop;
//忽的滚动条左右滚动的距离
var scrollLeft;
//定义一个掩饰的时间
var timeout;
function init(){
windowWidth=$(window).width();
windowHeight=$(window).height();
popWidth=$(".window").width();
popHeight=$(".window").height();
scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();
}
function popCenterWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
//进行参数的初始化
init();
//弹出窗口的x坐标
var popx=(windowWidth-popWidth)/2+scrollLeft;
//弹出窗口的y坐标
var popy=(windowHeight-popHeight)/2+scrollTop;
//让弹窗显示到我们设定的位置
//让弹窗显示到我们设定的位置
$("#center").animate({left:popx,top:popy},100).show("slow");
closeWindow();
},300);
}
function popLeftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popx=scrollLeft;
//弹出窗口的y坐标
var popy=(windowHeight-popHeight)+scrollTop-100;
//让弹窗显示到我们设定的位置
$("#left").animate({left:popx,top:popy},100).show("slow");
closeWindow();
},300);
}
function popRightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popx=windowWidth-popWidth+scrollLeft-10;
//弹出窗口的y坐标
var popy=windowHeight-popHeight+scrollTop-10;
//让弹窗显示到我们设定的位置
// $("#right").css("left",popx).css("top",popy).show("slow");
$("#right").animate({left:popx,top:popy},100).show("slow");
closeWindow();
},300);
}
function closeWindow(){
//找到X图片
$(".title img").click(function(){
// --title--div
$(this).parent().parent().hide("slow");
});
}