CSS半透明遮罩层 and 定位

日期:2019-03-16 浏览:372次

html

<!-- 半透明遮罩层 -->
<div class="mask" style="display: none;"></div>

css

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

 

jQuer

<!-- 半透明遮罩层 -->
$(document).click(function(event){
    var _con = $('.show_QR_code');   // 设置目标区域
    if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
        //$('#divTop').slideUp('slow');   //滑动消失
        $('.show_QR_code').fadeOut();
        $('.mask').fadeOut();   //淡出消失
    }
});
说明:
$('.mask').fadeIn();    //淡入展示
$('.mask').fadeOut();   //淡出消失

定位

.wechat_header{
    margin-top: 30px;
    position:relative;
}
.wechat_header .wechat_close{
    position: absolute;
    top: 0;
    right: 0;
}

wechat_close相对于wechat_header定位

没有评论

发表评论