jquery封装（-）

最新推荐文章于 2022-11-24 08:08:30 发布

juddy123

最新推荐文章于 2022-11-24 08:08:30 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery封装

本文链接：https://blog.youkuaiyun.com/juddy123/article/details/72287270

jquery封装专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的页面弹窗居中显示的方法。通过定义一个扩展函数showCenter，可以根据弹窗的高度自动调整其在屏幕上的位置，确保无论弹窗高度如何变化都能保持居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面弹窗的写法：

</div>

.pop-bg{width: 100%; height:100%; overflow-y:scroll; position:fixed; top:0; left:0; background:rgba(66,66,66,.5);}

.pop{width: 660px;position:relative;background:#fff;margin:auto;}

因为每个div.pop的高度可能不同，所以需要动态设置div.pop在可视窗口内上下居中，此时需封装一个函数：

            $.fn.showCenter = function(params){
               var thisWOb = $(this).parent();
               if (typeof(params) != 'undefined' &&
                    typeof(params.isShowParent) &&
                           params.isShowParent == false) {
                       // 为false的时候，选择本身
                       thisWOb = $(this);
               }

//params，所传递的参数

//isShowParent，所传递的参数的key

//false，所传递的参数的key值

               // 显示出来了，才能准确设置div.pop的上下位置
               thisWOb.fadeIn();
              // div.pop的高度
               var selfHeight = $(this).outerHeight();
               // 得到窗口的高度
               var windowHeight = $(window).height();
               var c = (parseFloat(windowHeight) - parseFloat(selfHeight)) / 2;

               if (c >= 0) {
                      $(this).css('top', c);
               } else {
                     $(this).css('top', 0);

               }
           }

<／script>

调用方法具体为：$("#transaction-pop-bg .pop").showCenter();