jquery实现弹出窗口效果

原创 2012年03月27日 14:39:41
用jquery实现图片任意点击,到任意地方去,很好用也很好看的效果
<!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>
<style type="text/css">
.window{
	width:250px;
	background-color:#d0def0;
	position:absolute;
	padding:2px;
	margin:5px;
	display:none;
	}
.content{
	height:150px;
	background-color:#FFF;
	font-size:14px;
	overflow:auto;
	}
	.title{
		padding:2px;
		color:#0CF;
		font-size:14px;
		}
.title img{
		float:right;
		}
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="window.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	$("#btn_center").click(function(){
		popCenterWindow();
		});
		
	$("#btn_right").click(function(){
		popRightWindow();
		});
		$("#btn_left").click(function(){
		popLeftWindow();
		});
		
	});

</script>
</head>
<body>
<input type="button" value="居中窗口" id="btn_center">
<input type="button" value="居左下角" id="btn_left">
<input type="button" value="居右下角" id="btn_right">
   <div class="window" id="center">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居中窗口</div>
<div class="content">爱的供养  呼吸的痛</div>
   </div>
   
  <div class="window" id="left">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居左窗口</div>
<div class="content">爱的供养  呼吸的痛</div>
  </div>
  <div class="window" id="right">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居右窗口</div>
<div class="content">爱的供养  呼吸的痛</div>
  </div>
</body>
</html>

<!---------------js插件---------->

//获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;
function init(){
   windowHeight=$(window).height();
   windowWidth=$(window).width();
   popHeight=$(".window").height();
   popWidth=$(".window").width();
}
//关闭窗口的方法
function closeWindow(){
	$(".title img").click(function(){
		$(this).parent().parent().hide("slow");
		});
	}
	//定义弹出居中窗口的方法
	function popCenterWindow(){
		init();
		//计算弹出窗口的左上角Y的偏移量
	var popY=(windowHeight-popHeight)/2;
	var popX=(windowWidth-popWidth)/2;
	//alert(popY);
	//设定窗口的位置
	$("#center").css("top",popY).css("left",popX).slideToggle("slow"); 
	closeWindow();
	}
	function popLeftWindow(){
		init();
		//计算弹出窗口的左上角Y的偏移量
	var popY=windowHeight-popHeight;
	//var popX=-(windowWidth-popWidth);
	//alert(popY);
	//设定窗口的位置
	$("#left").css("top",popY).css("left",0).slideToggle("slow");
	closeWindow();
	}
	function popRightWindow(){
		init();
		//计算弹出窗口的左上角Y的偏移量
	var popY=windowHeight-popHeight;
	var popX=windowWidth-popWidth;
	//alert(popY);
	//设定窗口的位置
	$("#right").css("top",popY).css("left",popX).slideToggle("slow");
	closeWindow();
	}


使用jQuery实现弹出框效果

一,背景 由于在项目中需要用到的一个页面效果是弹出框,在项目中我使用jquery的ui插件,来实现这个功能,用法也比较简单 二,准备环境 1)引入jquery插件。 在index.ht...
  • smart_seed
  • smart_seed
  • 2016年11月28日 18:38
  • 5800

JQuery实现可移动的窗口

JS代码 function dialogMove(which){//which参数指定的是哪一个窗口的id,比如"#dialog" var offestLeft; var offestTop; ...
  • QQ282030166
  • QQ282030166
  • 2012年09月05日 16:00
  • 626

Jquery实现弹出窗口效果

在程序的编写过程中,许多小功能小技巧是很实用的,这里和大家分享一个,积累多了,就不容易卡住了。 jquery实现弹出窗口效果 2012-03-28 09:16:29 我来说两句 收藏 我要投稿 用jq...
  • u013756780
  • u013756780
  • 2014年03月10日 16:13
  • 495

jquery实现弹出窗口效果的实例代码

原文:http://www.jb51.net/article/43862.htm Javascript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个Java...
  • h330531987
  • h330531987
  • 2017年05月01日 21:31
  • 347

jquery实现弹出窗口

JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。 其大致步骤为: •创建一个装...
  • Baple
  • Baple
  • 2013年10月13日 06:24
  • 859

jQuery弹出窗口的实现

jQuery弹出窗口 今天有李伟老师话费了一上午的时间给我们细致的讲解了弹出窗口的效果,感觉这个功能确实很强大,写起来也并不是很难,需要简单的JS结合来完成这个相应的效果。听了老师说,在企业中用到这...
  • smallsundoudou
  • smallsundoudou
  • 2012年03月29日 21:28
  • 13252

使用jquery实现弹出窗口效果(居中、左下角、右下角)

JS代码: // 定义一些变量 //获得窗口的高度 var windowHeight; //获得窗口的宽度 var windowWidth; //获得弹窗的高度 var popHeigh...
  • zhangwei10php
  • zhangwei10php
  • 2012年03月27日 20:50
  • 1763

jquery实现轮播图效果

总结一下《锋利的jquery》里的用jquery实现一个简单的单击上一张及下一张实现的轮播图效果      先看下最后的效果图             其实轮播图的原理都差不多,一个搞明白后其他也都能...
  • natalie86
  • natalie86
  • 2015年03月13日 14:41
  • 1051

jquery实现弹幕效果

DOCTYPE HTML> html>  head>   title>javascript弹幕title>           style>         #play{      ...
  • itdream88
  • itdream88
  • 2016年09月26日 18:51
  • 542

jquery制作拉开帷幕特效

jquery制作拉开帷幕特效 源代码下载地址:http://www.zuidaima.com/share/1607127558900736.htm...
  • springmvc_springdata
  • springmvc_springdata
  • 2015年08月29日 10:44
  • 923
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现弹出窗口效果
举报原因:
原因补充:

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