关闭

给div添加遮罩层,js给页面添加遮罩层

3237人阅读 评论(0) 收藏 举报
分类:

 给id为p_div的元素添加遮罩层

<div style="background:#000000;height:280px;position:relative;" id="p_div">

        <video id="videoLive" style="" controls="controls" autoplay="autoplay" width="100%" height="280" poster="https://i.ys7.com/static/images/6abdc484fbf44ebf833c7af00be57aab/b722c3dc934db2e78c772aa7b6f6a167/1.jpeg">
            <source src="http://vshare.ys7.com:80/hcnp/540540642_1_2_1_0_183.136.184.7_6500.m3u8" type="video/mp4">

        </video>

     <!--ID为zcdiv的为遮罩层-->

        <div id="zcdiv" style="position:absolute;top:0;left:0;z-index:10000;width:100%;height:100%;background:#000000;">
            <div style="position:relative;width:100%;height:100%;">
                <div id="loading" style="position:absolute;top:37%;left:50%;margin-left:-60px;height:55px;width:150px;border:0px solid red;padding:0;color:white;">
                    <img src="img/Loading.gif" width="50" />
                    <span style="display:inline-block;position:relative;top:-18px;">正在加载</span>
                </div>
            </div>           
        </div>

    </div>

 <button type="button" onclick="show()" >显示隐藏</button>
    <div id="msg2"></div>

JS代码控制显示隐藏

 function show() {
            if ($("#zcdiv").is(":hidden")) {
                $("#zcdiv").show();
                $("#msg2").html("显示");
            } else {
                $("#zcdiv").hide();
                $("#msg2").html("隐藏");
            }
        }



//显示遮罩层
function showLoading(msg) {
    if (msg==undefined||msg==null||msg=="") {
        msg = "正在加载";
    }
    $(document).find("body").append("<div id=\"zc34\" style=\"text-align:center;width:100%;height:100%;position:fixed;top:0;left:0;background: rgba(0, 0, 0, 0.3);z-index:50000;display:table;\"><div style=\"display: table-cell; vertical-align: middle;\"><div id=\"zcMsg\" style=\"width:120px;height:40px;line-height:40px;background:#FFFFFF;margin:0 auto;box-shadow: 0px 0px 2px #000;text-align:center; \"><img src=\"/Content/img/loading.gif\" style=\"margin-right:3px;position:relative;top:-2px;\" />" + msg + "</div></div></div>");
}

//关闭遮罩层
function closeLoading() {
    if ($("#zc34") != undefined && $("#zc34")!=null) {
        $("#zc34").remove();
    }    
}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:59134次
    • 积分:1433
    • 等级:
    • 排名:千里之外
    • 原创:86篇
    • 转载:2篇
    • 译文:0篇
    • 评论:13条
    最新评论