jQuery+html5实现div弹出层并遮罩背景
渐入弹窗，背景变色不可点击。查看效果：http://runjs.cn/detail/t08gmoij
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>popup</title>
<scripttype="text/javascript"src="jquery-2.1.3.min.js"></script>
</head>
<styletype="text/css">
#popup{
position:absolute;display:none;z-index:3000;background-color:#FFF;left:601px;top:217px;height:150px;width:217px;line-height:94px;text-align:center;
border:1pxsolid#03F;
}
#embedding{
position:absolute;background-color:#36F;top:94px;height:56px;width:217px;line-height:56px;text-align:center;
}
a{
text-decoration:none;
font-family:"微软雅黑";
font-size:18px;
color:#FFF;
}
</style>
<scripttype="text/javascript">
$(function(){
varurl=null;
$(document).on('click','button',function(){
vartext=$(this).text();
switch(text){
case'OSChina':url='http://www.oschina.net/';break;
case'baidu':url='http://www.baidu.com/';break;
case'CSDN':url='http://bbs.csdn.net/home';break;
}
$('#text').text('是否确定前往'+text+'?');
$('#loadingDiv').css('display','block');
$('#popup').slideDown();
});
$(document).on('click','a',function(){
if($(this).text()=='确定'){
location.href=url;
}else{
$('#loadingDiv').css('display','none');
$('#popup').slideUp();
}
});
});
</script>
<body>
<divid="loadingDiv"style="position:fixed;display:none;z-index:2000;top:0px;left:0px;width:100%;height:100%;background-color:rgba(255,255,0,0.5)"></div>
<divid="popup">
<spanid="text"></span>
<divid="embedding">
<ahref="javascript:void(0)">确定</a>
<ahref="javascript:void(0)">取消</a>
</div>
</div>
<buttonstyle="position:absolute;left:233px;top:260px;">OSChina</button>
<buttonstyle="position:absolute;left:233px;top:320px;">baidu</button>
<buttonstyle="position:absolute;left:233px;top:380px;">CSDN</button>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。