jquery遮罩层写法

日期:2019-03-14 浏览:243次

html css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 半透明遮罩层 -->
<div class="mask" style="display: none;">

.mask{
po>ition: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 100;
display: none;
}

显示遮罩层js 代码

1
$('.mask').fadeIn();

遮罩层淡出消失js 代码

1
2
3
4
5
6
7
8
$(document).click(function(event){
var _con = $('.show_QR_code'); // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
//$('#show_QR_code').slideUp('slow'); //滑动消失
$('.show_QR_code').fadeOut();//目标区域淡出消失
$('.mask').fadeOut(); //淡出消失
}
});

千万别忘记引入jQuery文件

没有评论

发表评论