精华内容
下载资源
问答
  • id为p_div的元素添加遮罩层 <div style="background:#000000;height:280px;position:relative;" id="p_div">    <video id="videoLive" style="&...

     给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();
                    }
                }
        };

     

    展开全文
  • 最近详情页面做了一个遮罩提示,用户第一次登录之后会提示,然后下次登录就不显示。 首先考虑用到的是cookie,这样用户第一次进入到详情页,通过js种下一个cookie,然后下次登录再进行判断即可。 /* *设置...

    最近给详情页面做了一个遮罩提示,用户第一次登录之后会提示,然后下次登录就不显示。

    首先考虑用到的是cookie,这样用户第一次进入到详情页,通过js种下一个cookie,然后下次登录再进行判断即可。

    /*
        *设置Cookie 
        */
        function SetCookie(cookieName, cookieValue, nDays) {
            /**//* 当前日期 */
            var today = new Date();
    
            /**//* Cookie 过期时间 */
            var expire = new Date();
    
            /**//* 如果未设置nDays参数或者nDays为0,取默认值 1 */
            if (nDays == null || nDays == 0)
                nDays = 1;
    
            /**//* 计算Cookie过期时间 */
            expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数
    
            /**//* 设置Cookie值 */
            document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
        }
    
        /*
        * 读取指定的Cookie值   
        */
        function GetCookie(cookieName) {
            /* Cookie 字符串 */
            var theCookie = "" + document.cookie;
    
            /* 找到cookieName的位置 */
            var ind = theCookie.indexOf(cookieName);
    
            /* 如果未找到cookieName,返回空字符串 */
            if (ind == -1 || cookieName == "")
                return "";
    
            /* 确定分号的位置 */
            var ind1 = theCookie.indexOf(';', ind);
            if (ind1 == -1)
                ind1 = theCookie.length;
    
            /* 读取Cookie值 */
            return unescape(theCookie.substring(ind + cookieName.length + 1, ind1));
        }
    
        jQuery(function () {
            var firstlogin = GetCookie("firstlogin");
            if (firstlogin && firstlogin.length > 0) {
            } else {
                SetCookie("firstlogin", "yes", 999);
                masking.open("", "divSuccessed", 0.5);
            }
        });
    View Code

    其中masking.open("", "divSuccessed", 0.5)方法是用来弹出遮罩层的,具体方法如下:

     // 遮罩层  2014-05-13
        var masking = {
            // houseid:房源id
            // objId:弹出对话框id
            // opacity: float number between 0 and 1
            open: function (houseid, objId, opacity) {
                var mask = document.getElementById('mask');
                mask.style.display = '';
                mask.style.position = 'absolute';
                mask.style.zIndex = '10000';
                mask.style.left = '0';
                mask.style.top = '0';
                mask.style.width = document.body.scrollWidth + "px";
                mask.style.height = "4200px";
                mask.style.backgroundColor = "#000";
                if (/msie/i.test(navigator.userAgent)) {
                    mask.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
                } else {
                    mask.style.opacity = opacity;
                }
                this.openDiv(objId);
                this.houseid = houseid;
    
                // 隐藏搜索框、topheader
                jQuery(".tr01")[0].style.position = "static";
                document.getElementById("Div1").style.position = "static";
                jQuery("em")[0].style.position = "static";
                
               
                document.getElementById("divscroll").style.position = "static";
            },
            close: function (objId) {
                document.getElementById('mask').style.display = 'none';
                this.closeDiv(objId);
                document.getElementById("divscroll").style.position = "fixed";
                document.getElementById("Div1").style.position = "relative";
                jQuery("em")[0].style.position = "relative";
            },
            openDiv: function (objId) {
    
                var obj = document.getElementById(objId);
                obj.style.top = "250px";
                obj.style.display = "block";
    
            },
            closeDiv: function (objId) {
    
                var obj = document.getElementById(objId);
                obj.style.display = "none";
    
            }   
        };
    View Code

    其中heigt属性设置的比较大,考虑到页面有滚动条。如果页面没有滚动条的话,可以直接设置成屏幕的高度。

     

    最后就是遮罩层和提示框了,把两个div嵌入到详情页即可。放到body标签内的任意位置均可

    <div id="mask"  style="z-index:10000">
        </div>
        <div class="dbox-delate" style="display: none;z-index:10001" id="divSuccessed">
            <div class="title">
                <a href="javascript:void(0)" class="btnClose" οnclick="masking.close('divSuccessed')">
                </a>
            </div>
            <p style="text-align: left">
                郑重提示:</p>
            <p style="text-align: center">
                请您在签订租房合同之前,切勿支付任何形式的费用,以免上当受骗。</p>
            <div class="btn">
                <a href="javascript:void(0)" class="btn-blue" οnclick="masking.close('divSuccessed')"
                    id="confirmFinal">我知道了</a></div>
        </div>
    
    <style type="text/css">
        /*dbox20140512 star--------------------*/
        .blod
        {
            font-weight: bold;
        }
        .ml20
        {
            margin-left: 20px;
        }
        .dbox-delate
        {
            width: 400px;
            padding: 10px 10px 15px;
            line-height: 28px;
            background: #fff;
            border: 1px solid #cfcfcf;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            height: auto;
            z-index: 100;
        }
        .dbox-delate .title
        {
            width: 100%;
            overflow: hidden;
        }
        .dbox-delate .title a.btnClose
        {
            width: 16px;
            height: 16px;
            background: url(/rent/styles/Image/icoClose.gif) 0 50% no-repeat;
            float: right;
            cursor: pointer;
        }
        
        .dbox-delate .btn
        {
            padding-top: 15px;
            text-align: center;
        }
        .dbox-delate .btn .btn-blue, .dbox-delate .btn .btn-org
        {
            width: 90px;
            height: 28px;
            background: #398cd4;
            border-radius: 4px;
            color: #fff;
            border: none;
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
        }
        .dbox-delate .btn .btn-org
        {
            background: #fe6203;
        }
    </style>
    View Code

     

    给需要用到的同学们~

    转载于:https://www.cnblogs.com/adder/p/3863175.html

    展开全文
  • 页面添加遮罩

    2017-06-16 16:24:10
    function closes(){ $("#Loading").fadeOut("normal",function(){ $(this).remove(); }); } var pc; $.parser.onComplete = function(){ if(pc) clearTimeout(pc); pc = setTimeout
    <script>
    function closes(){
        $("#Loading").fadeOut("normal",function(){
            $(this).remove();
        });
    }
    var pc;
    $.parser.onComplete = function(){
        if(pc) clearTimeout(pc);
        pc = setTimeout(closes, 500);
    }
    </script>   
    
    <div id='Loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align:center;padding-top: 20%;">
    <h1><img style="width: 10%" src='/saasoc/image/loading1.gif' /><font color="#15428B">加载中···</font></h1></div>  
    展开全文
  • html添加遮罩

    千次阅读 2018-11-04 12:09:27
    html添加遮罩的代码如下所示 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;DIV CSS遮罩层&amp;lt;/title&amp;gt;...

    html添加遮罩的代码如下所示
    使用div+css ,加载中的图片是网上下载的动图,可以根据自己需要进行修改

    <!DOCTYPE html>
    <html>
    <head>
        <title>DIV CSS遮罩层</title>
        <script language="javascript" type="text/javascript">
            function showdiv() {
                document.getElementById("bg").style.display ="block";
                /* document.getElementById("show").style.display ="block";*/
            }
            function hidediv() {
                document.getElementById("bg").style.display ='none';
                /*document.getElementById("show").style.display ='none';*/
            }
        </script>
        <style type="text/css">
            #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
            #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
            /*遮罩图片居中显示*/
            .zhezhao{
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
    <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
    <div id="bg">
        <img class="zhezhao" src="img/timg.gif">
    </div>    <!-- 遮罩层  -->
    <div id="show">测试
        <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
    </div>
    </body>
    </html>
    

    显示效果如下图:

    在这里插入图片描述

    展开全文
  • 页面添加遮罩和loading图标

    千次阅读 2013-01-17 17:07:45
    这里有两个层,一个loading层,一个overlay遮罩层。 然后需要用css来调整样式。 js代码: function form_submit_overlay_loading(){ var loading = ''; loading += ''; loading += ''; return loading; } ...
  • jQuery实现响应鼠标图片加个遮罩层文字说明的动画效果丨芯晴网页特效丨CsrCode.Cn html, body, div,ul, li {  margin: 0;  padding: 0; } div.examples_body {  width: 360px;  margin: 0px auto;
  • 遮罩层 ,IE=IE8,chrome=1"> content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> ${ctxPath}/static/layuiadmin/layui/css/layui.css" media="all"> ${...
  • vue element 添加遮罩

    千次阅读 2019-12-20 10:00:12
    el-dialog自带有遮罩层,但在:modal=“true” :modal-append-to-body=“true” 等设置都没有效果的情况下,考虑自己加一个遮罩层吧 添加html,div里面可以添加文字或图片 <div v-if="showModal" class="mask">...
  • JQuery中添加遮罩

    2019-12-20 17:27:42
    这样在前端加个加载中的遮罩客户带来好一点的视觉感,如果没有任何提示的消息,会让人以为页面卡了一样,在项目中就遇到了这个问题,记录一下: 在查询发送ajax请求前使用 $.blockUI();但是需要将ajax设置为异步...
  • 添加遮罩时禁止滚屏

    2017-08-03 15:03:30
    添加遮罩时禁止滚屏 写页面经常会遇到弹出层,为了突显弹出层,一般会设一个遮罩 div class="mask">div> 遮罩层的样式为: .mask{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); ...
  • 1. 添加遮罩层 this.mask = document.createElement('div'); this.mask.style.width = window.innerWidth + 'px'; this.mask.style.height = window.innerHeight + 'px'; this.mask.style.background = '#fff'...
  • 原生html中添加水印遮罩

    万次阅读 2021-03-02 16:11:15
    效果图 代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> , initial-scale=1.0"> 水印遮罩title> head> <style> .watermark_mask { position: fixed;...
  • //为页面添加遮罩 [removed] = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement....
  • Easyui中存在页签Tabs,通过页签可以将若干页面集合到一起,但是当tab添加一个远程界面的时候,如果页面加载量较多,会出现长时间的等待,这就需要遮罩。 因为我的项目主要是在tab中添加content,通过iframe加载远程...
  • 自定义前端页面添加遮罩

    千次阅读 2018-06-11 14:21:14
    \"></div>").appendTo("body");   }   if(!$maskMsg){   $maskMsg = $(";\">"+defMsg+"</div>")   .appendTo("body").css({'font-size':'12px'});   }     $mask.css({width:"100%",height:"800"});  ...
  • $('body').append('<div id=overlay></div>'); $('#overlay') .height(docHeight) .css({ 'opacity': .9, //透明度 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': 'black', 'width':...
  • js添加遮罩

    2013-08-01 00:02:00
    具体实现要求说明:在要添加遮罩层的位置必须是相对的位置:psotion:relative 遮罩层的位置必须是绝对的:postion:aasolute;width: 100 %;heigth: 100 % ;top:0px;left:0px; " button " id= " ...
  • jq页面添加覆盖层遮罩

    千次阅读 2014-08-21 09:36:13
    先引入jq代码,然后代码如下: $(function(){ var docHeight = $(document).height();... $('body').append(''); $('#overlay') .height(docHeight) .css({ 'opacity': .9, //透明度 'po
  • 网页提交时添加遮罩

    千次阅读 2015-10-10 14:48:14
    // 表单提交遮罩 $(document).ready(function() { $("form").submit(function() { // 添加 GRAYLAYER.create("grayLayer-div"); window.onblur = function() { // 删除 GRAYLAYER.del("grayLayer-div")...
  • JavaScript动态添加全局遮罩

    千次阅读 2019-02-14 15:08:51
    使用js动态添加全局遮罩层 代码 function setMask(){//设置遮罩层 var mask = document.createElement('div'); mask.style.width = window.innerWidth + 'px'; mask.style.height = window.innerH...
  • 在使用element-ui中的dialog对话框时,我发现点击按钮让对话框显示时,它默认是整个页面加上了遮罩层的效果,这个其实是不太友好的,我实际想看到的效果是对话框部分不需要遮罩,对话框以外的部分才需要加上遮罩. ...
  • div上添加遮罩层用于提示信息

    千次阅读 2018-09-16 19:32:58
    遮罩层div设置属性position: absolute;,背景属性background,属性bottom: 0;让遮罩层div在背景div里面。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&...
  • 图片动态添加半透明遮罩效果

    千次阅读 2018-01-18 01:11:17
    当鼠标hover到图片上时,出现半透明遮罩效果,移除hover则取消半透明遮罩效果 .demo{ width:425px; height:283px; position: relative; overflow:hidden; } demo img{
  • 2019独角兽企业重金招聘Python工程师标准>>> ...发送ajax的时候显示遮罩和loading.gif ajax结束移除元素 转载于:https://my.oschina.net/famoustone/blog/870524
  • 添加弹窗背景遮罩

    2018-08-20 16:24:11
    1.首先写一个遮罩层div,然后再写一个弹窗的div 提示 js弹窗 js弹出DIV,并使整个页面背景变暗 确 定 js代码:(把jq引进来) // 弹窗 function ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,239
精华内容 2,495
关键字:

给body添加遮罩