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

Posted 2022-07-20 知

篇首语：上下观古今，起伏千万途。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Js控制弹窗实现在任意分辨率下居中显示相关的知识，希望对你有一定的参考价值。

Js控制弹窗实现在任意分辨率下居中显示 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

　　贴代码

复制代码代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>弹出窗口_ jb 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 id="center"> <div ><img src=close gif>csdn欢迎您</div> <div >哈哈哈哈哈哈哈</div> </div> <div id="right"> <div ><img src=close gif>csdn欢迎您</div> <div >哈哈哈哈哈哈哈</div> </div> <div id="left"> <div ><img src=close gif>csdn欢迎您</div> <div >哈哈哈哈哈哈哈</div> </div> </body> </>

复制代码代码如下: //窗口的高度 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)/ +scrollTop; var popX=(windowWidth popWidht)/ +scrollleft; $("#center") animate(top:popY left:popX ) show("slow"); ); closeWindow(); function popleftWindow() clearTimeout(timeout); timeout=setTimeout(function () init(); var popY=windowHeight+scrollTop popHeight ; var popX=scrollleft ; $("#left") animate(top:popY left:popX ) show("slow"); ); closeWindow(); function poprightWindow() clearTimeout(timeout); timeout=setTimeout(function () init(); var popY=windowHeight popHeight+scrollTop ; var popX=windowWidth popWidht+scrollleft ; $("#right") animate(top:popY left:popX ) show("slow"); ); closeWindow();

　　 CSS

复制代码代码如下: cha138/Article/program/Java/JSP/201311/19817