;(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();
其中.Hide{display:none}
用jquery把div获取成对象了
然后后面就直接对这个对象进行操作
改变它的class,和css
overlay是遮罩
content-box-bg是它要弹出的盒子
IE6的时候,加上了滚动条上面滚过的距离
浙公网安备 33010602011771号