;(function($){
    var info = {};//存储用户信息

    //组件-提示div
    function Overlay(){
        var boxBg = $('.content-box-bg'),
            overlay = $('.overlay');
        boxBg.removeClass('Hide').css({//初始弹框居中
            'left':($(window).width()-boxBg.width())/2 + 'px',
            'top':($(window).height()-boxBg.height())/2 + 'px'
        });
        overlay.removeClass('Hide').css({//初始背景层居中
            'width': $(window).width(),
            'height': $(window).height()
        });
        $(window).on('resize', function(){
            boxBg.css({//改变窗口大小时弹框居中
                'left':($(window).width()-boxBg.width())/2 + 'px',
                'top':($(window).height()-boxBg.height())/2 + 'px'
            });
            overlay.css({//改变窗口大小时背景层居中
                'width': $(window).width(),
                'height': $(window).height()
            });
        });

        //ie6兼容
        var isIE6 = $.browser.msie && (Number($.browser.version) <= 6);
        if(isIE6){//ie7及以下的浏览器
            boxBg.css('top', ($(window).height()-boxBg.height())/2 + $(window).scrollTop() + 'px');
            overlay.css('top', $(window).scrollTop() + 'px');
            $(window).scroll(function(){
                boxBg.css('top', ($(window).height()-boxBg.height())/2 + $(window).scrollTop() + 'px');
                overlay.css('top', $(window).scrollTop() + 'px');
            });
        };

        //关闭按钮
        $('.close').click(function(){
            $('.content-box-bg').addClass('Hide');
            $('.overlay').addClass('Hide');
        });
    }

    //起始
    $('.btn').off('click').on('click', function(){
        Overlay(); //弹出层
    });

})(jQuery);
jQuery.noConflict();
整个js

其中.Hide{display:none}

用jquery把div获取成对象了

然后后面就直接对这个对象进行操作

改变它的class,和css

overlay是遮罩

content-box-bg是它要弹出的盒子

IE6的时候,加上了滚动条上面滚过的距离

 

posted on 2014-01-21 16:38  meeming  阅读(227)  评论(0)    收藏  举报



Fork me on GitHub