Js控制弹窗实现在任意分辨率下居中显示
生活随笔
收集整理的這篇文章主要介紹了
Js控制弹窗实现在任意分辨率下居中显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
彈窗居中比較煩人的是怎么才能在任意分辨率下實現居中顯示。
1，html部分
2，js代碼部分
<script> //窗口的高度 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(); } </script>3，CSS代碼部分
.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; }總結
以上是生活随笔為你收集整理的Js控制弹窗实现在任意分辨率下居中显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JEECMS编辑漏洞及随便拿webshe
- 下一篇： Flex通过Blazeds利用Remot