jQuery实现弹出居、右下角、左下角窗口效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】 jQuery实现弹出居、右下角、左下角窗口效果

作者:Dezai.CN / 发布于2013/3/7/ 3217

我们先来看看怎么实现弹出居中窗口，弹出居中窗口主要是要获取几个参数，分别为浏览器的高度、宽度当前窗口的高度、宽度，滚动条滚动的高度和宽度等，然后再定位这个层。


	<!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>

	<link href="window.css" type="text/css" rel="stylesheet" />

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

	<script type="text/javascript">

	$(function(){

	//监听按钮事件
	$("#btn1").click(function(){

	//执行窗口移动效果

	MoveWindow();

	});

	//添加关闭图片的单击事件

	$(".title img").click(function(){

	//隐藏窗口

	$(this).parent().parent().hide('slow');

	});

	});

	function MoveWindow(){

	//获取浏览器的宽度

	var bwidth=$(window).width();

	//获取浏览器的高度

	var bheight=$(window).height();

	//获取当前窗口宽度

	var winwidth=$("#center").width();

	//获取当前窗口高度

	var winheight=$("#center").height();

	//获取滚动条的高度

	var sTop=$(window).scrollTop();

	//获取滚动条的宽度

	var sLeft=$(window).scrollLeft();

	//计算窗口距左的距离

	var left=sLeft+(bwidth-winwidth)/2;

	//计算窗口距上的距离

	var top=sTop+(bheight-winheight)/2;

	//设置层的位置

	$("#center").css("left",left).css("top",top).show("slow");

	}

	</script>

	<title>无标题文档</title>

	</head>

	<body>

	

	

	

	

	

	<input type="button" id="btn1" value="打开居中窗口" />

	<div class="window" id="center">

	<div class="title">

	<img src="../images/close.jpg" />这里标题文字

	</div>

	<div class="content">

	CSDN中文it社区

	CSDN学生大本营 李伟

	3G开发者联盟

	3gput.com

	</div>

	</div>

	</body>

	</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>

	<link href="window.css" type="text/css" rel="stylesheet" />

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

	

	<script type="text/javascript">

	$(function(){

	//监听按钮事件

	$("#btn1").click(function(){

	

	//获取浏览器的宽度

	var bwidth=$(window).width();

	//获取浏览器的高度

	var bheight=$(window).height();

	//获取当前窗口宽度

	var winwidth=$("#center").outerWidth(true);

	//获取当前窗口高度

	var winheight=$("#center").outerHeight(true);

	//获取滚动条的高度

	var sTop=$(window).scrollTop();

	//获取滚动条的宽度

	var sLeft=$(window).scrollLeft();

	

	//计算窗口距左的距离

	var left=0;

	//计算窗口距上的距离

	var top=sTop+bheight-winheight;

	//设置层的位置

	$("#center").css("left",left).css("top",top).show("slow");

	});

	//添加关闭图片的单击事件

	$(".title img").click(function(){

	//隐藏窗口

	$(this).parent().parent().hide('slow');

	});

	

	});

	

	</script>

	

	<title>无标题文档</title>

	</head>

	<body>

	

	

	

	

	

	<input type="button" id="btn1" value="打开左下角窗口" />

	<div class="window" id="center">

	<div class="title">

	<img src="../images/close.jpg" />这里标题文字

	</div>

	<div class="content">

	CSDN中文it社区

	CSDN学生大本营 李伟

	3G开发者联盟

	3gput.com

	</div>

	</div>

	</body>

	</html>

试试其它关键字

　弹出　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)