用jquery实现弹窗居中、居左、居右显示的效果(完全代码,可立即使用)

原创 2012年03月27日 21:42:13

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>弹出窗口</title>
<link type="text/css" rel="stylesheet" href="window.css">
<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript">
$(document).ready(function (){
$("#btn_center").click(function (){
$(window).scroll(function (){
popcenterWindow();
});
});
$("#btn_right").click(function (){
$(window).scroll(function (){
poprightWindow();
});
});
$("#btn_left").click(function (){
$(window).scroll(function (){
popleftWindow();
});
});
});
</script>
</head>


<body>
<input type="button" value="弹出居中的窗口" id="btn_center">
<input type="button" value="弹出居右的窗口" id="btn_right">
<input type="button" value="弹出居左的窗口" id="btn_left">
<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>




<div class="window" id="center">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
<div class="title"><img src="close.gif">csdn欢迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>


</body>

</html>


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=$(".window").height();
//获得弹窗的宽度
popWidht=$(".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-popWidht)/2+scrollleft;
$("#center").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight+scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight+scrollTop-10;
var popX=windowWidth-popWidht+scrollleft-10;
$("#right").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}


window.css文件:

/* CSS Document */
.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
}


.title{
padding:2px;
color:#999;
font-size:14px;
}


.title img{
float:right;
cursor:pointer;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JQuery实现的弹窗效果

  • 2015-06-19 16:12
  • 31KB
  • 下载

jquery实现弹窗效果实例

利用jquery实现两种弹窗效果: 1:淡入弹窗效果: *{padding: 0;margin: 0;} .box{width: 100%;height: 1...

jquery实现弹窗效果与表格中信息的添加

实现弹窗效果与表格的添加                  $(function(){       $("#dialog").dial...

JQuery实现子元素在父元素居中(左右、上下均居中)

相信很多初学者朋友在学习Java前端页面的时候很困惑一个问题,如何实现一个元素在父元素中上下居中并且左右呢? 笔者上网查了一下,发现要么网上答案答非所问,要么就是很片面,仅仅实现了上下居中或者仅仅实现...

jquery实现居中、左下角、右下角窗口效果

jquery_windows.html文件 弹出窗口 $(document).ready(function (){ //利用toggle方法实现显示和隐藏 $(...

jQuery实现弹出居、右下角、左下角窗口效果(一)

今天给大家带来的是,实用jQuery技术实现各种弹窗效果,比如弹出指定位置的窗口(左下角、右下角、居中...)等,尤其是弹出右下角窗口特别实用,如果能够跟随滚动条一起滚动,那就非常good了!一些企业...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)

感谢这些天一直支持我的朋友们,也有很多朋友在QQ上给我留言,表达了他们看后我的文章后自己的一点想法,也希望更多的朋友和我一起交流,一起学习。也对支持我的原创论坛的朋友们表示衷心的感谢,我也会一如既往的...

jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)