文档章节

遮罩层

IceRainYWC
 IceRainYWC
发布于 2014/09/09 13:31
字数 407
阅读 143
收藏 7

1.页面代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 遮层 </title>
  <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="js/layer.js"></script>
 </head>
 <body>
  <br>
  <center><input type="button" value="显示层" onclick="showLoad('加载中,请稍候。。。');alert('5秒后将关闭提示层!');window.setTimeout(function(){closeLoad();},5000);"></center>
 </body>
</html>

2.JS代码(layer.js):

//加载遮层
function showLoad(tipInfo) {
    var iWidth = 150;     //弹出窗口的宽度;
    var iHeight = 0;    //弹出窗口的高度;
    var scrolltop = 0;
    var scrollleft = 0;
    var cheight = 0;
    var cwidth = 0;
    var eTip = document.createElement('div');
    eTip.setAttribute('id', 'tipDiv');
    eTip.style.position = 'absolute';
    eTip.style.display = 'none';
    eTip.style.border = 'solid 0px #D1D1D1';
    //eTip.style.backgroundColor = '#4B981D';
    eTip.style.padding = '5px 5px';
    eTip.style.zindex = "9999999";
    if(document.body.scrollTop){//这是一个js的兼容
        scrollleft=document.body.scrollLeft;
        scrolltop=document.body.scrollTop;
        cheight=document.body.clientHeight;
        cwidth=document.body.clientWidth;
    }else{
        scrollleft=document.documentElement.scrollLeft;
        scrolltop=document.documentElement.scrollTop;
        cheight=document.documentElement.clientHeight;
        cwidth=document.documentElement.clientWidth;
    }
    iHeight = eTip.offsetHeight;
    var v_left=(cwidth-iWidth)/2 + scrollleft; //
    var v_top=(cheight-iHeight)/2+ scrolltop-50;
    eTip.style.left = v_left + 'px';
    eTip.style.top = v_top + 'px';
    window.onresize=function(){
        if(document.body.scrollTop){
            eTip.style.left = (document.body.clientWidth-iWidth)/2+document.body.scrollLeft;
            eTip.style.top =(document.body.clientHeight-iHeight)/2+document.body.scrollTop-50;
        }else{
            eTip.style.left = (document.documentElement.clientWidth-iWidth)/2+document.documentElement.scrollLeft;
            eTip.style.top =(document.documentElement.clientHeight-iHeight)/2+document.documentElement.scrollTop-50;
        }
    }
    eTip.innerHTML = '<center><span style=\'color:#238CAF; font-weight:bold; font-color:#238CAF;cursor:default; font-size:15px\'>' + tipInfo + '</span><br><img src=\'images/loading.gif\' style=\'width:60px;height:60px;\' /></center>';
    try {
        document.body.appendChild(eTip);
    } catch (e) { }
    $("#tipDiv").css("float", "right");
    $("#tipDiv").css("z-index", "999999999");
    $('#tipDiv').show();
    ShowMark();
}
//关闭层
function closeLoad() {
 try{
     $('#tipDiv').hide();
     HideMark();
    }catch(e){}
}
//显示蒙灰层
function ShowMark() {
    var xp_mark = document.getElementById("xp_mark");
    if (xp_mark != null) {
        //设置DIV
        xp_mark.style.left = 0 + "px";
        xp_mark.style.top = 0 + "px";
        xp_mark.style.position = "absolute";
        xp_mark.style.backgroundColor = "#F1EDED";
        xp_mark.style.zIndex = "999999998";
        if (document.all) {
            xp_mark.style.filter = "alpha(opacity=75)";
            var Ie_ver = navigator["appVersion"].substr(22, 1);
            if (Ie_ver == 6 || Ie_ver == 5) { 
                hideSelectBoxes();
            }
        }else { xp_mark.style.opacity = "0.7"; }
        xp_mark.style.width = "100%";
        xp_mark.style.height = "100%";
        xp_mark.style.display = "block";
    }else {
        //页面添加div explainDiv,注意必须是紧跟body 内的第一个元素.否则IE6不正常.
        $("body").prepend("<div id='xp_mark' style='display:none;'></div>");
        ShowMark(); //继续回调自己
    }
}
//隐藏蒙灰层
function HideMark() {
    var xp_mark = document.getElementById("xp_mark");
    xp_mark.style.display = "none";
    var Ie_ver = navigator["appVersion"].substr(22, 1);
    if (Ie_ver == 6 || Ie_ver == 5) { 
        showSelectBoxes();
    }
}

动态gif图片:

效果图:

 

© 著作权归作者所有

共有 人打赏支持
IceRainYWC
粉丝 13
博文 111
码字总数 49297
作品 0
石家庄
程序员
私信 提问
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
0
1
实现新手引导简单遮罩(无需shader)

效果如下: 大部分教程都有shader实现遮罩,shader可以控制更好效果的遮罩。unity自带的功能也能实现简单的新手引导遮罩,只是unity自带的遮罩会有锯齿。之后再更新加shader的版本。 以下是具...

lisa0626
04/25
0
0
JS实现遮罩层

用JS实现一个常见的遮罩层,该遮罩层包含三部分(触发按钮,透明遮罩层,弹出对话层),并分解各部分(分为HTML,CSS,JavaScript),逐一讲解实现的机理。最终效果如下图: HTML结构 一个用来触...

MangoGan
2017/11/24
0
0
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法

最近做的一个小程序需求,其中一个页面使用到了 这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 的 文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显...

清夜
08/08
0
0
【功能】遮罩层实现

遮罩层固定于窗口中央,不会随滚动条滑动。 遮罩层实现: <style type="text/css">/遮罩层 CSS/ #close{ text-shadow: 0 1px 0 #fff; opacity: .2; filter: alpha(opacity=20); width:30px; ......

霞女
2016/01/12
15
0

没有更多内容

加载失败,请刷新页面

加载更多

利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
31分钟前
1
0
Android SELinux avc dennied权限问题解决方法

1. 概述 SELinux是Google从android 5.0开始,强制引入的一套非常严格的权限管理机制,主要用于增强系统的安全性。 然而,在开发中,我们经常会遇到由于SELinux造成的各种权限不足,即使拥有“...

TreasureWe
42分钟前
2
0
阿里云ACP认证详细笔记(一)

ECS--------------------------1.云服务器Elastic Compute Service(ECS)2.Terraform:您可以使用开源工具Terraform来预配和管理ECS资源。Terraform提供一种简单机制,能够将配置文件部署...

啃不动地大坚果
47分钟前
1
0
如何实现MetaMask签名授权后DAPP一键登录功能?

1 摘要 网站太多,各种用户名/密码实在记不住。所以我们逐渐接受了BAT账号的授权登录功能。在以太坊DAPP应用中,也可以使用MetaMask实现授权后一键登录功能。MetaMask是去中心化钱包,授权信...

HiBlock
48分钟前
3
0
raspberrypi的相关网址

一、NOOBS安装 NOOBS使用说明书 http://www.shumeipai.net/thread-20009-1-1.html NOOBS自定义多系统启动 https://www.jianshu.com/p/afbcd17b785d NOOBS安装自定义系统 https://blog.csdn.......

mbzhong
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部