弹出窗口居中显示


$(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();
        });
   
});

posted @ 2015-08-04 10:39  前端_茂  阅读(1045)  评论(0编辑  收藏  举报