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

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

php中文网

发布： 2016-05-16 17:49:33

原创

1482人浏览过

核心代码：

Sora

Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。

538

查看详情

复制代码代码如下:

//获取窗口的高度 
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.jb51.net'); 
//设定窗口的位置 
$("#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",popY-50).css("left",popX-50).slideToggle("slow"); 
closeWindow(); 
}

完整代码：

$("#btn_right").click(function () { 
popRightWindow(); 
}); 
$("#btn_left").click(function () { 
popLeftWindow(); 
});

});

</script><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">
<img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="关闭"><script src="https://www.php.cn/hezuo/f220a8ffcae8732bbc8e3d8f7f36834b.js"></script>本站-居中窗口</div> 
<div class="content">www.jb51.net</div> 
</div>

<div class="window" id="left"> 
<div id="title2" class="title">
<img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="关闭"><script src="https://www.php.cn/hezuo/f220a8ffcae8732bbc8e3d8f7f36834b.js"></script>本站-居左窗口</div> 
<div class="content">www.jb51.net</div> 
</div> 
<div class="window" id="right"> 
<div id="title3" class="title">
<img src="http://files.jb51.net/file_images/article/201210/close.jpg" alt="关闭"><script src="https://www.php.cn/hezuo/f220a8ffcae8732bbc8e3d8f7f36834b.js"></script>本站-居右窗口</div> 
<div class="content">www.jb51.net</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.jb51.net'); 
//设定窗口的位置 
$("#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",popY-50).css("left",popX-50).slideToggle("slow"); 
closeWindow(); 
} </script>

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

作者 cnblogs jihua