弹出一个满屏的遮罩层兼容ie6,ie7,ie8,firefox,chrome,推荐

兼容,一段代码搞掂。

演示推荐,一句话jquery链式写法

点击我

代码片段

$('body').prepend('<div id="mask"></div>').find('#mask').css({opacity:0.2, 
cursor:'pointer', background:'black', position:'absolute', zIndex:999, width:'100%', 
height:$(document).height()});

关闭遮罩

/*点击遮罩关闭,live方法用于,为通过js新增的元素添加事件*/
$('#mask').live('click',function(){
$(this).remove();
})

满屏的遮罩纯css实现,史上最简单代码,兼容所有浏览器

来自日常工作中的整理,代码简陋,不是成品不适合直接拿用,适用于前端的二次开发。以及jquery讲学之用。

演示

遮罩

代码

/*纯css全屏的遮罩层*/
#overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

居中的弹出窗口跟随滚动条滚动居中

来自日常工作中的整理,代码简陋,不是成品不适合直接拿用,适用于前端的二次开发。以及jquery讲学之用。

演示

弹出窗口

代码

function popup(){
$('#popup').fadeIn();
$(window).scroll(function(){

/*滚动条到顶部的距离*/
var _scrolltop = $(document).scrollTop();
$('#popup').animate({marginTop:_scrolltop-200},10);
})
}