`
japankn
  • 浏览: 216107 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

自己写遮盖的心得

阅读更多

    近来项目中为了使用Ajax技术,需要一个友好的遮盖层效果的等待画面,本人比较懒,没有使用一些ajax框架,自己动手写了一个遮盖层。

    其中遇到几个比较难搞定的问题:

    1、select这个优先级比较高的页面控件

    2、兼容Mozilla

    3、消息框的自动居中(起码看起来比较舒服)

 

    从网络上搜索了一堆解决办法,比较适用的有:

    1、使用比select优先级更高的遮住他(还有一种是将它隐藏,不喜欢),我只用Iframe,效果不错!

    2、兼容Mozilla主要是支持Mozilla的css样式(网上搜)

    3、从网上摘抄了一段css代码(呵呵)

 

    这样主要的问题解决了。

    我的所有样式都写在了js中,这样免去了每个页面的导入css文件和创建占位的div。样例如下:

 

页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    //注意下面这句是针对Firefox的,如果不写要报错(也能运行)
    <meta http-equiv="Content-Type" content="application/vnd.mozilla.maybe.feed; charset=utf-8" />
    <title></title>
    <link href="02_.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="tool.js"></script>
    <script type="text/javascript" src="02_.js"></script>
</head>
<body>
<input type="button" value="显示" onclick="new MesDiv().dostart('标题内容','提示内容',true)">
<select>
    <option>select也能被盖住</option>
</select><br>
</body>
</html>

 

js代码

var bad,mes;
function MesDiv() {
    this.isIE = document.all ? true : false;
    this.init = function(title, content, bl) {
        if (!bad || !mes) {
            bad = this.baddingDiv();
            mes = this.mesDiv(title, content, bl);
            document.body.appendChild(bad);
            document.body.appendChild(mes);
        }
    }
    //底层,作为全屏的铺垫
    this.baddingDiv = function() {
        var d = createObject("div");
        var ifr = createObject("iframe");
        d.style.cssText = "position:absolute;width:100%;height:100%;" +
                          "background:#999999;left:0px;right:0px;top:0px;" +
                          "bottom:0px;-moz-opacity:0;filter:alpha(opacity = 0);" +
                          "z-index: 99;";
        ifr.style.cssText = "position:absolute;width:100%;height:100%;" +
                            "background:#CCCCCC;left:0px;right:0px;top:0px;" +
                            "bottom:0px;-moz-opacity:0;" +
                            "z-index: 96;";
        ifr.frameBorder = 0;
        d.appendChild(ifr);
        return d;
    }
    /*
    * 显示消息的层
    * title 标题内容
    * content 提示内容
    * bl是否有关闭事件及按钮,true为有
    */
    this.mesDiv = function(title, content, bl) {
        //消息框的外层
        var d1 = createObject("div");
        d1.style.cssText = "position: absolute;margin:-150px 0 0 -200px;z-index:100;" +
                           "top:50%;left:50%; width:400px;background-color: #FFFFFF;" +
                           "-moz-opacity:0.5;filter:alpha(opacity = 50);";
        //标题层
        var d2 = createObject("div");
        d2.style.cssText = "height:20px;padding-top:8px;background-color: #DDDDDD;";
        var d2_div1 = createObject("div");
        d2_div1.style.cssText = "float:left;width:290px;padding-left:20px;overflow:hidden;word-break:keep-all; text-overflow:ellipsis";
        d2_div1.appendChild(createText(title || "aaaaa"));
        d2.appendChild(d2_div1);
        if (bl || false) {
            var d2_div2 = createObject("div");
            d2_div2.style.cssText = "float:right;width:80px;text-align:right;padding-right:10px;";
            var d2_div2_span = createObject("span");
            d2_div2_span.onclick = function() {
                new MesDiv().showBackground(bad, 0,false);
    new MesDiv().showBackground(mes, 50,false);
            }
            d2_div2_span.innerHTML = "&times;"
            d2_div2.appendChild(d2_div2_span);
            d2.appendChild(d2_div2);
        }
        //内容层
        var d3 = createObject("div");
        d3.style.cssText = "border-top: #AAAAAA; border-top-style:solid;" +
                           "border-top-width:1px;height:100px;text-align:center;";
        var d3_div1 = createObject("div");
        d3_div1.style.cssText = "padding-top:20px;";
        var d3_div1_img = createObject("img");
        d3_div1_img.src = "warn.png";
        d3_div1_img.align = "absmiddle";
        d3_div1.appendChild(d3_div1_img);
        d3_div1.appendChild(createText(content || "bbbbbb"));
  d3.appendChild(d3_div1);
        if (!bl || false) {
            var d3_div2 = createObject("div");
            d3_div2.style.cssText = "padding-top:10px;";
            var d3_div2_img = createObject("img");
            d3_div2_img.src = "load.gif";
            d3_div2.appendChild(d3_div2_img);
            d3.appendChild(d3_div2);
        }
        d1.appendChild(d2);
        d1.appendChild(d3);
        return d1;
    }
    this.dostart = function(title, content, bl) {
        this.init(title, content, bl);
        bad.style.display = "block";
        mes.style.display = "block";
        this.showBackground(bad, 60,true);
        this.showBackground(mes, 100,true);
    }
    this.doend = function() {
        this.init();
        this.showBackground(bad, 0,false);
  this.showBackground(mes, 50,false);
    }
    //让背景渐渐变暗
    this.showBackground = function(obj, endInt,bl)
    {
        if (this.isIE)
        {
   if(bl){
    obj.filters.alpha.opacity += 2;
    if (obj.filters.alpha.opacity < endInt){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }
   }else{
    obj.filters.alpha.opacity -= 2;
    if (obj.filters.alpha.opacity > endInt){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }else{
     obj.style.display = "none";
    }
   }
        }
        else {
   if(bl){
    var al = parseFloat(obj.style.opacity);
    al += 0.02;
    obj.style.opacity = al;
    if (al < (endInt / 100)){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }
   }else{
    var al = parseFloat(obj.style.opacity);
    al -= 0.02;
    obj.style.opacity = al;
    if (al > (endInt / 100)){
     setTimeout(function(){new MesDiv().showBackground(obj, endInt,bl)}, 5);
    }else{
     obj.style.display = "none";
    }
   }
        }
    }
}

 

    其中有一些没能按照设想的那样写,主要还是javascript的水平不行,不过效果出来了!!希望以后可以写出更好的!!呵呵!!

分享到:
评论

相关推荐

    javascript写的页面遮盖层,可根据具体情况自己设定或改写

    在本项目中,我们关注的是一个基于JavaScript实现的页面遮盖层功能。这个功能通常用于在进行页面加载、提交表单或执行其他需要用户等待的操作时,提供一种视觉上的提示,以防止用户在后台进行其他操作。 页面遮盖层...

    遮盖效果

    标题“遮盖效果”可能指的是在软件开发中的一种视觉处理技术,它通常涉及到图形用户界面(GUI)的设计或图像处理。遮盖效果可以用于隐藏、突出显示或改变UI元素的可见性,以此来提高用户体验或者实现特定的交互设计...

    Jquery做的遮盖层

    "Jquery做的遮盖层"是一个常见的需求,用于在网页上创建一个半透明的覆盖层,通常用于加载提示、弹出框或阻止用户在特定操作期间与页面交互。以下是对这个主题的详细讲解: 首先,让我们理解遮盖层(Overlay)的...

    图片遮盖涂抹.rar

    在IT领域,图片遮盖涂抹是一种常见的图像处理技术,它涉及到图像编辑、隐私保护和视觉艺术等多个方面。在这个“图片遮盖涂抹.rar”压缩包中,我们主要关注的是易语言实现的图片遮盖涂抹源码。易语言是一种中文编程...

    动画ppt之遮盖效果

    通常,“进入”类型的遮盖效果适用于新引入的元素,让其随着遮盖层的移动而渐渐呈现;而“强调”类型的遮盖效果则用于已经存在的元素,使其在屏幕上以更加醒目的方式出现。 值得注意的是,遮盖效果并非一成不变。...

    单击弹出遮盖层

    在IT行业中,"单击弹出遮盖层"是一个常见的前端交互设计,它涉及到网页UI设计、JavaScript编程以及CSS样式布局等多个技术领域。遮盖层通常用于创建一个半透明的覆盖层,当用户点击某个元素时,遮盖层会出现在整个...

    JS+CSS遮盖层

    JS+CSS遮盖层,完全支持ie等主流浏览器,并解决在ie6下无法遮盖窗口级控件问题。

    学外语必备-电影字幕遮盖软件

    为此,市场上出现了一款“学外语必备-电影字幕遮盖软件”,它通过一个独特的学习方式,帮助用户提高英语听力及口语技能。 该软件的独特之处在于,它提供了一个电影字幕遮盖功能。在看电影时,大多数学习者习惯于...

    css遮盖层

    在某些场景下,我们可能需要实现一个遮盖层(overlay)效果,它通常用于弹窗、模态框或者加载提示等,以创建一种半透明的覆盖层,使用户无法与页面的其他部分互动,从而专注于特定的交互区域。本篇将详细讲解如何...

    android控件放大被遮盖已解决

    然而,当一个控件放大后,可能会超出其原本的布局边界,导致被其他控件遮盖,这无疑会给用户界面带来困扰。"android控件放大被遮盖已解决"这个主题就是针对这一问题的解决方案。 首先,我们需要理解Android的布局...

    易语言源码易语言密码遮盖保护源码.rar

    易语言源码易语言密码遮盖保护源码.rar 易语言源码易语言密码遮盖保护源码.rar 易语言源码易语言密码遮盖保护源码.rar 易语言源码易语言密码遮盖保护源码.rar 易语言源码易语言密码遮盖保护源码.rar 易语言源码...

    超酷的全屏遮盖显示图片效果

    在网页设计中,视觉效果是吸引用户注意力的关键因素之一,"超酷的全屏遮盖显示图片效果"正是一种能够提升用户体验的创新技术。这种效果通常用于网站的开场动画、背景展示或者产品介绍等场景,它能够让图片以一种独特...

    超好用的Jquery弹出框和遮盖层

    本教程将深入探讨如何使用jQuery实现“超好用的弹出框和遮盖层”。 首先,让我们理解弹出框(Popup)和遮盖层(Overlay)的基本概念。弹出框通常用于在用户与页面交互时显示额外信息或提供交互界面,如警告、确认...

    易语言密码遮盖保护

    易语言是一种专为中国人设计的编程语言,它以简明的中文语法,...这个源码可以作为一个基础模板,开发者可以根据自己的需求进行修改和扩展,例如添加多线程支持,或者增加错误处理机制,以提高程序的稳定性和安全性。

    易语言图片遮盖涂抹

    在这个“易语言图片遮盖涂抹”主题中,我们主要关注的是如何使用易语言来处理图像,实现图片的遮盖和涂抹效果。 在计算机图形学中,图片遮盖涂抹通常涉及到图像处理和显示技术。这种技术可以用于隐私保护,如在显示...

    遮盖物体显现

    本插件实现了摄像机下被物体遮盖的对象进行轮廓泛光显示的功能。

    javascrip实现t遮盖层

    在JavaScript中实现遮盖层(通常称为“蒙层”或“overlay”)是一种常见的网页交互设计,用于在用户进行特定操作(如登录、确认、加载数据等)时提供视觉反馈,确保用户注意力集中于弹出的窗口而暂时阻止对背景页面...

    flex 遮盖式 TabNavigator

    "遮盖式 TabNavigator"可能指的是在设计时或运行时TabNavigator的特定样式或行为,其中选项卡可能会覆盖其他内容,而不是简单地堆叠或切换。 这篇博客文章(虽然链接不可用)可能深入探讨了如何自定义Flex中的...

    JavaScript弹出遮盖层

    在网页设计中,"JavaScript弹出遮盖层"是一个常见且实用的技术,用于创建对话框、提示框或者加载指示器等效果,提供更好的用户体验。 首先,我们需要了解遮盖层(Overlay)的概念。遮盖层是在网页上覆盖一层半透明...

    百度地图高亮显示城市行政区域,遮盖非目标区域

    利用目标区域点的集合与外围自定义区域形成一个环形遮罩层,高亮显示所选行政区划,遮盖非目标区域。

Global site tag (gtag.js) - Google Analytics