jQuery弹出窗口完整代码(居中,居左,居右)

发布时间：2020-12-14 22:30:41 所属栏目：资源来源：网络整理

导读：核心代码：复制代码代码如下: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width();

核心代码：

复制代码代码如下:

//获取窗口的高度 
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('www.aspzz.cn'); 
//设定窗口的位置 
$("#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-50).css("left",50).slideToggle("slow"); 
closeWindow(); 
} 
function popRightWindow(){ 
init(); 
//计算弹出窗口的左上角Y的偏移量 
var popY=windowHeight-popHeight; 
var popX=windowWidth-popWidth; 
//alert(www.cnblogs.com/jihua); 
//设定窗口的位置 
$("#right").css("top",popX-50).slideToggle("slow"); 
closeWindow(); 
}

完整代码：

<!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>jQuery弹出窗口 - 编程小技巧</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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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="title"><p class="pic_center"><img src="http://img50.lidatong.com.cn//uploads/allimg/c20201214/ac98bcb421a316a0684aa4a95c5856eb.gif" alt="关闭" /></p>编程小技巧-居中窗口</div> 
<div class="content">www.aspzz.cn</div> 
</div>

<div class="window" id="left"> 
<div id="title2" class="title"><p class="pic_center"><img src="http://img50.lidatong.com.cn//uploads/allimg/c20201214/ac98bcb421a316a0684aa4a95c5856eb.gif" alt="关闭" /></p>编程小技巧-居左窗口</div> 
<div class="content">www.aspzz.cn</div> 
</div> 
<div class="window" id="right"> 
<div id="title3" class="title"><p class="pic_center"><img src="http://img50.lidatong.com.cn//uploads/allimg/c20201214/ac98bcb421a316a0684aa4a95c5856eb.gif" alt="关闭" /></p>编程小技巧-居右窗口</div> 
<div class="content">www.aspzz.cn</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(){ 
$(".title img").click(function(){ 
$(this).parent().parent().hide("slow"); 
}); 
} 
//定义弹出居中窗口的方法 
function popCenterWindow(){ 
init(); 
//计算弹出窗口的左上角Y的偏移量 
var popY=(windowHeight-popHeight)/2; 
var popX=(windowWidth-popWidth)/2; 
//alert('www.aspzz.cn'); 
//设定窗口的位置 
$("#center").css("top",popX).slideToggle("slow"); 
closeWindow(); 
} 
function popLeftWindow(){ 
init(); 
//计算弹出窗口的左上角Y的偏移量 
var popY=windowHeight-popHeight; 
//var popX=-(windowWidth-popWidth); 
//alert(popY); 
//设定窗口的位置 
$("#left").css("top",50).slideToggle("slow"); 
closeWindow(); 
} 
function popRightWindow(){ 
init(); 
//计算弹出窗口的左上角Y的偏移量 
var popY=windowHeight-popHeight; 
var popX=windowWidth-popWidth; 
//alert(www.cnblogs.com/jihua); 
//设定窗口的位置 
$("#right").css("top",popX-50).slideToggle("slow"); 
closeWindow(); 
} </script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

作者 cnblogs jihua

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!