Biegral Blog

 给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" οnclick="show()" >显示隐藏</button>
    <div id="msg2"></div>

JS代码控制显示隐藏

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

var CoverLoadingObj = {
            //显示遮罩层
            showLoading:function(msg) {
                if (msg == undefined || msg == null || msg == "") {
                    msg = "正在加载";
                }
                $(document).find("body").append("<div id=\"zc34ASDEOP\" 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=\"/Theme/images/loading.gif\" style=\"margin-right:3px;position:relative;top:-2px;\" />" + msg + "</div></div></div>");
            },
            //关闭遮罩层
            closeLoading:function () {
                if ($("#zc34ASDEOP") != undefined && $("#zc34ASDEOP") != null) {
                    $("#zc34ASDEOP").remove();
                }
            }
    };