JQuery在浏览器中央显示控件

最新推荐文章于 2025-12-02 21:41:05 发布

转载最新推荐文章于 2025-12-02 21:41:05 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ponyblog/archive/2013/03/06/2946046.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JQuery将控件在浏览器窗口中央显示的方法。通过定义一个自定义函数，该函数能够根据浏览器窗口的尺寸调整控件的位置，确保其始终位于屏幕中央。适用于需要精确控制元素布局的场景。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="scripts/jquery-1.9.1.min.js"></script>
 6 <title>JQuery小技巧--在浏览器中央显示控件</title>
 7 
 8 <script>
 9 $(document).ready(function(e) {
10     $("#div_center").hide();//隐藏这个控件
11     $.fn.center=function(){
12         this.css("position","absolute");//定义显示方式为绝对位置
13         $(this).css("height",200);
14         $(this).css("width",200);
15         $(this).css("background-color","green");
16         //浏览器高宽-控件高宽/2 就是控件上边距与左边距的坐标定位
17         this.css("top",( window.innerHeight-this.height())/2+$(window).scrollTop()+"px");
18         this.css("left",( window.innerWidth-this.width())/2+$(window).scrollLeft()+"px");
19         return $(this);
20         };
21     $("#btn_display").click(function(e) {
22         $("#div_center").show();
23         $("#div_center").center();
24     });
25 });
26 </script>
27 </head>
28 <body>
29 <div id="div_center" hidden="false" >隐藏div</div>
30 <button id="btn_display">显示</button>
31 </body>
32 </html>