jQuery弹出窗口完整代码

最新推荐文章于 2023-11-30 10:33:28 发布

zhulei632

最新推荐文章于 2023-11-30 10:33:28 发布

阅读量6.2k

点赞数

分类专栏： js html

html 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html,

另外一个类似的, 带步骤确认的窗口:http://keleyi.com/keleyi/phtml/jquery/1.htm

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery弹出窗口</title>
<style type="text/css">
.window{
    width:400px;
    background-color:#d0def0;
    position:absolute;
    padding:2px;
    margin:5px;
    display:none;
    }
.content{
    height:200px;
    background-color:#FFF;
    font-size:14px;
    overflow:auto;
    }
.win_title{
	padding:2px;
	color:#0CF;
	font-size:14px;
	}
.win_title img{
	float:right;
	}
</style>
<script type="text/javascript" src="http://s0.qhimg.com/lib/jquery/183.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>
	 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
		<input type="button" value="居中窗口" id="btn_center" />
		<input type="button" value="居左下角" id="btn_left" />
		<input type="button" value="居右下角" id="btn_right" />
	</div>
	
	<div class="window" id="center">
		<div id="title" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - center</div>
		<div class="content">www.google.cn</div>
	</div>

	<div class="window" id="left">
		<div id="title2" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - left</div>
		<div class="content">www.baidu.com</div>
	</div>

	<div class="window" id="right">
		<div id="title3" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - right</div>
		<div class="content">www.qq.com</div>
	</div>

	<script type="text/javascript">
		//获取窗口的高度
		var windowHeight;
		//获取窗口的宽度
		var windowWidth;
		//获取弹窗的宽度
		var popWidth;
		//获取弹窗高度
		var popHeight;
		function init() {
		   windowHeight=$(window).height();
		   windowWidth=$(window).width();
		   popHeight=$(".window").height();
		   popWidth=$(".window").width();
		}

		//关闭窗口的方法
		function closeWindow(){
			$(".win_title img").click(function(){
				$(this).parent().parent().hide("normal");
			});
		}
		
		function popCenterWindow(){
			init();
			//计算弹出窗口的左上角Y的偏移量
			var popY=(windowHeight-popHeight)/2; //垂直方向偏移量
			var popX=(windowWidth-popWidth)/2;   //水平方向偏移量
			
			//设定窗口的位置
			$("#center").css("top",popY).css("left",popX).slideToggle("fast");
			closeWindow();
		}
		
		function popLeftWindow(){
			init();
			//计算弹出窗口的左上角Y的偏移量
			var popY=windowHeight-popHeight;
			//var popX=-(windowWidth-popWidth);
			
			//设定窗口的位置
			$("#left").css("top",popY-50).css("left",50).slideToggle("slow");
			closeWindow();
		}
		function popRightWindow() {
			init();
			//计算弹出窗口的左上角Y的偏移量
			var popY=windowHeight-popHeight;
			var popX=windowWidth-popWidth;
			
			//设定窗口的位置
			$("#right").css("top",popY-50).css("left",popX-50).slideToggle("normal");
			closeWindow();
		}
	</script>
</body>
</html>

zhulei632

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery弹出窗口完整代码

参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html, 稍作整理如下:jQuery弹出窗口.window{ width:400px; background-color:#d0def0; position:absolute; padding:2px; mar
复制链接

扫一扫

专栏目录