本文主要是介绍给div添加遮罩层，js给页面添加遮罩层，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
给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();}}};
这篇关于给div添加遮罩层，js给页面添加遮罩层的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
