文档章节

遮罩层

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
2018/04/25
0
0
JS实现遮罩层

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

MangoGan
2017/11/24
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
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法

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

清夜
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MongoDB

关于MongoDb 1、MongoDB是一个开源的、基于分布式的、面向文档存储的非关系型数据库。 2、是非关系型数据库当中功能最丰富、最像关系数据库的。 3、由C++编写, MongoDB可以运行在Windows、u...

谢思华
22分钟前
2
0
Node.js 进程平滑离场剖析

本文由云+社区发表 作者:草小灰 使用 Node.js 搭建 HTTP Server 已是司空见惯的事。在生产环境中,Node 进程平滑重启直接关系到服务的可靠性,它的重要性不容我们忽视。既然是平滑重启,就涉...

腾讯云加社区
29分钟前
1
0
druid等 olap框架对比分析

简介 Druid 是一个开源的,分布式的,列存储的,适用于实时数据分析的存储系统,能够快速聚合、灵活过滤、毫秒级查询、和低延迟数据导入。 Druid在设计时充分考虑到了高可用性,各种节点挂掉...

hblt-j
30分钟前
1
0
Idea 禁用代码重复等警告

在相应方法上添加注解 @SuppressWarnings("action") @Transactional@SuppressWarnings("Duplicates")public void analyzeDpBook(DpBook dpBook) { EpubBook _epubBook = epubBookSe......

lemos
33分钟前
1
0
MaxCompute studio与权限那些事儿

背景知识 MaxCompute拥有一套强大的安全体系,来保护项目空间里的数据安全。用户在使用MaxCompute时,应理解权限的一些基本概念: 权限可分解为三要素,即主体(用户账号或角色),客体(表/...

阿里云官方博客
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部