jquery配合css实现滚动页面弹层的绝对居中

最新推荐文章于 2022-12-23 15:23:29 发布

Bonjours

最新推荐文章于 2022-12-23 15:23:29 发布

阅读量304

点赞数

分类专栏：前端 css 文章标签： jquery控制弹层随页面滚动

本文链接：https://blog.csdn.net/Bonjours/article/details/103711888

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

功能是页面上下滚动不影响弹层的垂直绝对居中，他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下（由于文件大小限制，滚动速度快进了2倍，实际鼠标滚动速度更缓慢平滑）：

HTML：

<body class="page-body">
    <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹层</a>
    <div class="page-popupCom opacity-com content" style="display: none;">
        <div class="contract-pics ">
            <img src="8.png">
        </div>
    </div>

    <!-- 假定用一张背景图撑开页面高度 -->
    <img src="bg.png" class="bgh">
</body>

CSS：

<style type="text/css">
    .page-body{ overflow-x: hidden; position: relative;}
    .bgh{ position: absolute; left: 0; top: 0; z-index: -1 }
    .page-popupCom{ position: fixed; left: 0; top: 0; z-index: 10}
    .dt-lk12{ width: 118px; height: 30px; display: block; background-color: #f60; position: absolute; top: 0; left: 50%; margin: 100px auto; color: #fff; text-align: center; line-height: 30px}
    .opacity-com{ background-color: rgba(0,0,0,0.4); width: 100%; height: 100%}
    .contract-pics{ width: 1000px; text-align: center; margin: auto; height: 900px; overflow-y: scroll; position: absolute; top: 0; left: 0; z-index: 10;}
    .contract-pics img{ max-width: 100% }
</style>

JS：

<script src="jquery.min.js"></script>
<script type="text/javascript">
    $("[name='view']").click(function(){
        $(this).next("div").fadeIn();
    });
    $(".opacity-com").click(function(){
        $(this).fadeOut();
    });

    $(document).ready(function(){
        $("[name='view']").click(function(){
            var h = $(".bgh").height();
            $('.opacity-com').css({ 'height': h });
            $('.contract-pics').center();
            $('.contract-pics').fadeIn();
            return false;
        });
    });

    jQuery.fn.center = function(loaded) {

        var obj = this;
        body_width = parseInt($(window).width());
        body_height = parseInt($(window).height());

        block_width = parseInt(obj.width());
        block_height = parseInt(obj.height());
        
        left_position = parseInt((body_width/2) - (block_width/2)  + $(window).scrollLeft() -0);
        if (body_width<block_width) { left_position = 0 + $(window).scrollLeft(); };

        //如果页面弹层因为某些原因只固定在第一屏，页面滚动弹层就不见了，用下面的方法即可。如果header部分有公用引用，想要弹层往上提一些，可以直接-数字
        //top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop() -0);
        //if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };

        //通常情况下，不需要js纯样式即可达到js实现的效果
        top_position = parseInt((body_height/2) - (block_height/2) );
        
        if(!loaded) {
            //obj.css({'position': 'absolute'});
            //obj.css({ 'top': top_position, 'left': left_position });
            obj.css({ 'top': top_position,'left':left_position});
            $(window).bind('resize', function() { 
                obj.center(!loaded);
            });
            $(window).bind('scroll', function() { 
                obj.center(!loaded);
            });
            
        } else {
            obj.stop();
            obj.css({'position': 'absolute'});
            obj.animate({ 'top': top_position }, 200, 'linear');
        }
    }
</script>

大致思路就是：得到页面的实际高度、弹层的高度，绝对定位，我页面滚多少高度，弹层也相应的滚多少高度。我认为是在纯样式控制出问题的时候用js这种复杂的办法才合适，否则没必要如此麻烦。重点就是这句：

top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop() -0);
if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };

Bonjours

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery配合css实现滚动页面弹层的绝对居中

功能是页面上下滚动不影响弹层的垂直绝对居中，他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下（由于文件大小限制，滚动速度快进了2倍，实际鼠标滚动速度更缓慢平滑）：HTML：<body class="page-body"> <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹...
复制链接

扫一扫