自制DIV蒙层,简单好用,易学

浏览:888 发布日期:2018/06/21 分类:技术分享 关键字: 弹出层 DIV蒙层 DIV弹出层 div弹出层
自制DIV蒙层(弹出层):
1、HTML代码<!-- 弹出层 -->
<div class="share_r_top" onclick="shareRTop(1)"><img src="__STATIC__/agent/img/share_r_top.png" alt=""></div>
2、css代码.share_r_top img{float: right}//设置图片靠右(主要是箭头的位置)
.share_r_top{//这个是基本样式
    display: none;//开始时是隐藏的,只有点击某个按钮,或者触发才显示
    width: 100%;
    height: 100%;
    background-color: rgb(102,103,114);
    opacity: 0.8;
    z-index: 3;
    position: absolute;
    top: 0;
}
3、JS代码var shareRTop = function (num) {
        var top = $(window).scrollTop();//获取可视区top距离
        $('.share_r_top').css({
            'top':top//设置top距离,保证始终在屏幕前
        });
        if(num){//这个其实是用来判断是否隐藏的(总不可能一直显示着吧)
            $('.share_r_top').hide();
        }else {
            $('.share_r_top').show();
        }
    };
是不是很简单?
最佳答案
评论( 相关
后面还有条评论,点击查看>>