zoukankan      html  css  js  c++  java
  • 弹出窗口居中显示


    $(function() {
        // 居中
        function center(obj) {       
            var screenWidth = $(window).width(), screenHeight = $(window).height();  //当前浏览器窗口的 宽高
            var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度   
            var objLeft = (screenWidth - obj.width())/2 ;
            var objTop = (screenHeight - obj.height())/2 + scrolltop;

            obj.css({left: objLeft + 'px', top: objTop + 'px'});
           
            //浏览器窗口大小改变时
            $(window).resize(function() {
                screenWidth = $(window).width();
                screenHeight = $(window).height();
                scrolltop = $(document).scrollTop();
               
                objLeft = (screenWidth - obj.width())/2 ;
                objTop = (screenHeight - obj.height())/2 + scrolltop;
               
                obj.css({left: objLeft + 'px', top: objTop + 'px'});
               
            });
            
            //浏览器有滚动条时的操作
            $(window).scroll(function() {
                screenWidth = $(window).width();
                screenHeight = $(window).height();
                scrolltop = $(document).scrollTop();
               
                objLeft = (screenWidth - obj.width())/2 ;
                objTop = (screenHeight - obj.height())/2 + scrolltop;
               
                obj.css({left: objLeft + 'px', top: objTop + 'px'});
            });
           
        }
        
        //点击显示
        $('.wechat img').click(function() {       
            $('.mask , .bring').show();
            center($('.bring'));
        });
        
        
        //隐藏的操作
        $(".bring img").click(function(){
            $(".mask , .bring").hide();
            });
       
    });

  • 相关阅读:
    Echarts入门踩坑记录
    作业帮前端面经
    猿辅导前端面经
    昆仑万维前端面经
    顺丰科技前端面经
    云从科技前端面经
    亿联网络前端面经
    寒武纪前端面经
    纽约州交通事故数据可视化
    Vue中Object和Array数据变化侦测原理
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4701315.html
Copyright © 2011-2022 走看看