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

4307人阅读 评论(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();
    }    
}


查看评论

Jquery超简单遮罩层实现代码

在开发中,为了避免二次提交,遮罩层的运用越来越普遍 找了很多
  • tolcf
  • tolcf
  • 2014-08-20 21:36:04
  • 99817

用 js 实现“div的遮罩”效果

需求:点击“排序”按钮,生成div遮罩效果,如图: html代码:两个按钮 html代码:遮罩效果 排序 状...
  • hlbt0112
  • hlbt0112
  • 2016-09-13 15:22:06
  • 5578

给一个div加上黑色遮罩

接着整理   这个是之前写过的一个页面  现在整理一下 发出来 就是给页面加个黑色的遮罩  设置透明度  我在实际中写的是 给段视频加上遮罩 放置视频太亮导致视觉效果不好  好了 下面 简...
  • u013321789
  • u013321789
  • 2017-01-19 09:29:17
  • 1589

在HTML中实现和使用遮罩层

Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在i...
  • ale2012
  • ale2012
  • 2016-03-25 00:52:26
  • 7689

网页提交时添加遮罩层

// 表单提交遮罩 $(document).ready(function() { $("form").submit(function() { // 添加 GRAYLAYER.create("...
  • zhiyi321
  • zhiyi321
  • 2015-10-10 14:48:14
  • 2098

JS+CSS简单实现DIV遮罩层显示隐藏

DIV CSS遮罩层 function showdiv() { document.getElementById("bg").style.display...
  • xj626852095
  • xj626852095
  • 2015-07-07 16:53:53
  • 1612

JavaScript 实现loading加载效果实现页面遮罩层

1、引入需要JS文件2、HTML页面加载 遮罩块代码如下。 3、JavaScript 如何实现打开 和 关闭遮罩层: 1、打开遮罩层:document.getElementById("overlay...
  • China_Guanq
  • China_Guanq
  • 2017-08-03 14:09:02
  • 1159

html 最简遮罩层

前端页面偶尔使用到遮罩层,自己写了个最简的例子, html 最简遮罩层 function showDiv(){ document.getElementById('popDiv').sty...
  • u010304626
  • u010304626
  • 2016-03-22 19:40:27
  • 10880

H5给页面增加遮罩层

.mark{ position:fixed; left:0; top:0; opacity:.5; width:100%; height:100%; ...
  • gghh2015
  • gghh2015
  • 2018-01-03 09:05:48
  • 509

aspx页面用一个遮罩层显示正在加载,加载完后隐藏该div

已经有好一段时间没有使用.NET控件做web了,今天要优化一个界面,正好是用.NET控件做的,遂把此次解决问题的方案下来。 总是有许多开发人员觉得做东西没思路,我觉得只是见得少了,思考少了的缘故,所以...
  • zouyujie1127
  • zouyujie1127
  • 2014-12-24 16:55:40
  • 8065
    个人资料
    持之以恒
    等级:
    访问量: 12万+
    积分: 2393
    排名: 1万+
    最新评论