您的位置：首页 > Web前端 > JQuery
jQuery弹出窗口的效果

2012-03-29 19:37 381 查看
jQuery弹出窗口的效果
在许多网站上我们都可以看到当你浏览一个网页的时候会自动的弹出一个窗口，窗口的位置可以在中间，在左边或者是在右边。那么好的，我们来开始分析一下吧！
一   思路
1．div设计要弹出的窗口，因为用div很容易控制坐标
2．通过jQuery动态控制弹出窗口的位置（一般为左上角的坐标）
二  编写html代码来设计设计出三个窗口
<body>
<input type="button" id="btn1" value="弹出居左窗口"/>
<input type="button" id="btn2" value="弹出居中窗口"/>
<input type="button" id="btn3" value="弹出居右窗口"/>
<div id="center" class="window">
<div class="title">
居中csdn欢迎您!<img src="../images/close.gif"/>
</div>
<div class="content">
csdn是中国最大的it社区
<Br/>
csdn是中国最大的it社区
<br/>
csdn是中国最大的it社区
<br/>
</div>
</div>
<div id="left" class="window">
<div class="title">
居左窗口csdn欢迎您!<img src="../images/close.gif"/>
</div>
<div class="content">
csdn是中国最大的it社区
</div>
</div>
<div id="right" class="window">
<div class="title">
居右窗口csdn欢迎您!<img src="../images/close.gif"/>
</div>
<div class="content">
csdn是中国最大的it社区
</div>
</div>
</body>
从页面中我们可以看到三个窗口，但是要用css来修饰才会好看，css的样式为：
.window {
width: 250px;
background-color: #d0def0;
padding: 2px;
margin: 5px;
position: absolute;
display: none;
}

.content {
height: 150px;
background-color: #fff;
font-size: 14px;
padding: 2px;
overflow: auto; /*当内容多的时候自动增加*/
}

.title {
font-size: 13px;
padding: 3px;
}

.title img {
float: right;
cursor: pointer; /*设置鼠标的形状 */
}

我们看到的是设计好的三个窗口，但是因为在window中有	display: none;这两个属性，所以窗口会隐藏，所以可以在单机的时候让窗口显示
Js代码为：
// 窗口的宽度
var windowWidth;

// 窗口的高度
var windowHeight;

// 弹窗自身的高度
var popHeight;

// 弹窗的宽度
var popWidth;

// 获得滚动条距顶端的高度
var scrollTop;

// 获取滚动条距左端滚动的距离
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 closeWindow() {
// 首先找到图片
$(".title img").click(function() {
// 从找到title到window再去隐藏
$(this).parent().parent().hide("slow");
});
}

// 弹窗居中窗口
function popCenterWindow() {
clearTimeout(timeout);

timeout = setTimeout(function() {
// 进行参数的初始化
init();

// 计算 弹窗的左上角 x坐标=(窗口的宽度-弹窗宽度)/2
var popX = (windowWidth - popWidth) / 2 + scrollLeft;
// 计算 弹窗的左上角 y坐标=(窗口的高度-弹窗高度)/2
var popY = (windowHeight - popHeight) / 2 + scrollTop - 10;

// 让弹窗显示到我们设定的位置，并以动态的效果显示
$("#center").animate({
left : popX,
top : popY
}, 1000).show("slow");
//设定定时器的时间
}, 300);

// 在执行方法之后直接执行关闭窗口
closeWindow();

}
// 弹出右边窗口
function popRightWindow() {
clearTimeout(timeout);
timeout = setTimeout(function() {
init();
var popX = 0 + scrollLeft;
var popY = windowHeight - popHeight + scrollTop - 10;
$("#right").animate({
right : popX,
top : popY
}, 1000).show("slow");

}, 300);
closeWindow();
}

// 弹出居左的窗口
function popLeftWindow() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// 初始化参数
init();
// 坐标x为 0
var popX = 0 + scrollLeft;
// 计算 弹窗的左上角 y坐标=(窗口的高度-弹窗高度+滚动条的距离)
var popY = windowHeight - popHeight + scrollTop;

// 让弹窗显示到我们设定的位置
// $("#left").css("left", popX).css("top", popY).show("slow");
$("#left").animate({
left : popX,
top : popY
}, 1000).show("slow");

}, 300);

// 在执行方法之后直接执行关闭窗口
closeWindow();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： jquery function class div button css
相关文章推荐
新的分享
章节导航