Js控制弹窗实现在任意分辨率下居中显示

最新推荐文章于 2023-01-04 00:19:17 发布

博智诚信

最新推荐文章于 2023-01-04 00:19:17 发布

阅读量670

点赞数

分类专栏： javascript CSS

javascript 同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示，为了解决此问题，本文测试了一下案例在此与大家分享，有类似需求的朋友可以学习下

贴代码

复制代码代码如下:

 
 <!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>弹出窗口_www.jb51.net</title>  
  
 <link type="text/css" rel="stylesheet" href="window.css">  
  
 <script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>  
  
 <script language="javascript" type="text/javascript" src="window.js"></script>  
  
 <script language="javascript">  
  
 $(document).ready(function (){  
  
 $("#btn_center").click(function (){  
  
 $(window).scroll(function (){  
  
 popcenterWindow();  
  
 });  
  
 });  
  
 $("#btn_right").click(function (){  
  
 $(window).scroll(function (){  
  
 poprightWindow();  
  
 });  
  
 });  
  
 $("#btn_left").click(function (){  
  
 $(window).scroll(function (){  
  
 popleftWindow();  
  
 });  
  
 });  
  
 });  
  
 </script>  
  
 </head>  
  
 <body>  
  
 <input type="button" value="弹出居中的窗口" id="btn_center">  
  
 <input type="button" value="弹出居右的窗口" id="btn_right">  
  
 <input type="button" value="弹出居左的窗口" id="btn_left">  
  
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  
 <div class="window" id="center">  
  
 <div class="title"><img src="close.gif">csdn欢迎您</div>  
  
 <div class="content">哈哈哈哈哈哈哈</div>  
  
 </div>  
  
 <div class="window" id="right">  
  
 <div class="title"><img src="close.gif">csdn欢迎您</div>  
  
 <div class="content">哈哈哈哈哈哈哈</div>  
  
 </div>  
  
 <div class="window" id="left">  
  
 <div class="title"><img src="close.gif">csdn欢迎您</div>  
  
 <div class="content">哈哈哈哈哈哈哈</div>  
  
 </div>  
  
 </body>  
  
 </html>

复制代码代码如下:

 
 //窗口的高度  
  
 var windowHeight;  
  
 //窗口的宽度  
  
 var windowWidth;  
  
 //弹窗的高度  
  
 var popHeight;  
  
 //弹窗的宽度  
  
 var popWidth;  
  
 //滚动条滚动的高度  
  
 var scrollTop;  
  
 //滚动条滚动的宽度  
  
 var scrollleft;  
  
 //延时的时间  
  
 var timeout;  
  
 function init(){  
  
 //获得窗口的高度  
  
 windowHeight=$(window).height();  
  
 //获得窗口的宽度  
  
 windowWidth=$(window).width();  
  
 //获得弹窗的高度  
  
 popHeight=$(".window").height();  
  
 //获得弹窗的宽度  
  
 popWidht=$(".window").width();  
  
 //获得滚动条的高度  
  
 scrollTop=$(window).scrollTop();  
  
 //获得滚动条的宽度  
  
 scrollleft=$(window).scrollLeft();  
  
 }  
  
 //定义关闭窗口  
  
 function closeWindow(){  
  
 $(".title img").click(function (){  
  
 $(this).parent().parent().hide("slow");  
  
 });  
  
 }  
  
 //定义弹出窗口的方法  
  
 function popcenterWindow(){  
  
 //先清空上一次的延迟  
  
 clearTimeout(timeout);  
  
 timeout=setTimeout(function (){  
  
 init();  
  
 var popY=(windowHeight-popHeight)/2+scrollTop;  
  
 var popX=(windowWidth-popWidht)/2+scrollleft;  
  
 $("#center").animate({top:popY,left:popX},300).show("slow");},300);  
  
 closeWindow();  
  
 }  
  
 function popleftWindow(){  
  
 clearTimeout(timeout);  
  
 timeout=setTimeout(function (){  
  
 init();  
  
 var popY=windowHeight+scrollTop-popHeight-10;  
  
 var popX=scrollleft-5;  
  
 $("#left").animate({top:popY,left:popX},300).show("slow");},300);  
  
 closeWindow();  
  
 }  
  
 function poprightWindow(){  
  
 clearTimeout(timeout);  
  
 timeout=setTimeout(function (){  
  
 init();  
  
 var popY=windowHeight-popHeight+scrollTop-10;  
  
 var popX=windowWidth-popWidht+scrollleft-10;  
  
 $("#right").animate({top:popY,left:popX},300).show("slow");},300);  
  
 closeWindow();  
  
 }

CSS

复制代码代码如下:

<SPAN style="FONT-SIZE: 18px">.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
}

.title{
padding:2px;
color:#999;
font-size:14px;
}
.title img{
float:right;
cursor:pointer;
}</SPAN>