`
zqjhyl
  • 浏览: 2236 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

js遮罩问题

 
阅读更多
/* loading  */
#loading{
	width: 50%;
	height: 50%;
	top:25%;
    left:25%;
    line-height:70px;
	background-color:#CCCCFF;
	text-align:center;
	border:1px #6A5ACD  solid;
    position: absolute;
    z-index: 4999;
    font-size:12px;
}

#loading_gif{
	float: right;
    z-index: 7999;
    padding: 5px 0 0 0;
}
#loginTitle {   
   float:left;   
   font-size: 14px;
   color:#00008B;
   padding: 5px 0 0 0;   
} 
#loginTitleBar {   
    background-color: #6885ba;   
    color: #ffffff;    
    height: 3.5mm;   
    padding: 5px;   
    border-bottom: 1px solid #0088A8;   
    border-top: 1px solid #0088A8 ;   
    border-left: 1px solid #0088A8 ;   
    border-right: 1px solid #0088A8 ;   
    position: relative;   
    z-index: 6999;   
} 
#shadow{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#cccccc;
    z-index:3999;
    filter:alpha(opacity=70);
    opacity:0.7;
 }


Login.getElementID = function $(id){ 
    return document.getElementById(id);
  };
Login.showDialog = function(){
    var shadow = document.createElement("div");            
    var loading = document.createElement("div");                
    shadow.setAttribute("id", "shadow");        
    loading.setAttribute("id", "loading"); 
    loading.innerHTML="<div id='loginTitleBar'>" + "<div id='loginTitle'><label for='searchTips_lab'>" + "searching...</label>" +"</div>"+"<div id='loading_gif'>" + "<img src='img/loading.gif'/>" + "</div></div>";
    // Create button
    var button = document.createElement("input");
    button.setAttribute("id", "cancel_button");
    button.setAttribute("type", "button");
    button.setAttribute("value", "Cancel");
    loading.appendChild(button);
    
    var container = Login.getElementID("container");   
    container.appendChild(shadow);
    container.appendChild(loading);
    labelID = Login.getElementID("cancel_button");
    Login.cancel();
  };
Login.hideDialog = function(){
    var container = Login.getElementID("container");
    var shadow = Login.getElementID("shadow");
    var loading = Login.getElementID("loading");
    container.removeChild(shadow);
    container.removeChild(loading);
	};
Login.cancel = function(req){
    var cancel =Login.getElementID("cancel_button");
    cancel.onclick = function() {
    	Logino.hideDialog();	
    }
}; 
以上代码执行后的界面是以下附件,但是 我想文字和loading图片显示在标题上,但显示不了。是什么问题?

 

  • 大小: 4.2 KB
分享到:
评论

相关推荐

    javascript 遮罩层简单特效

    js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层

    JS遮罩插件

    "JS遮罩插件"是JavaScript编程中的一种常见工具,它主要用于创建覆盖在页面元素上的半透明层,通常用于加载提示、弹窗、对话框或阻止用户在特定操作期间与页面其余部分互动。 遮罩插件的工作原理通常是通过CSS设置...

    js遮罩层插件

    JavaScript 遮罩层插件是一种常见的前端开发工具,它用于在页面上创建一个半透明的覆盖层,通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中,我们讨论的插件可能名为“LoadMask”或者“lwb_...

    JS遮罩窗口[原创]

    在JavaScript编程中,"JS遮罩窗口"是一个常见的功能,用于在网页上创建一个半透明的覆盖层,通常用于显示弹出式对话框、加载提示或者阻塞用户交互直到特定操作完成。这种技术增强了用户体验,因为遮罩可以使得背景...

    前端js遮罩案例.zip

    在前端开发中,JavaScript(简称JS)是一种必不可少的脚本语言,用于实现动态交互效果,增强用户体验。在本文中,我们将深入探讨一个重要的前端技术——遮罩层(Mask),以及如何在实际项目中结合Ajax使用它。遮罩层...

    Javascript实现的遮罩层

    通过以上步骤,我们就实现了一个基本的JavaScript遮罩层。当然,这个遮罩层还可以进一步优化,比如添加过渡动画、响应式设计、兼容性处理等。在实际开发中,可以结合现有的库和框架,如jQuery或Vue.js,来更高效地...

    JavaScript图片展示遮罩特效

    JavaScript图片展示遮罩特效是一种常见的网页交互设计,它在用户将鼠标悬停在图片上时,会自动弹出一个半透明的遮罩层,显示更详细的图片信息或提供额外的操作选项。这种效果常用于相册浏览、产品展示、游戏交互等...

    js 遮罩层弹出对话框 很简单得

    js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得

    JS弹DIVJS弹DIV,遮罩层JS弹DIV,遮罩层

    JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层

    遮罩层 javascript js 数据提交

    "遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层,并在用户点击提交按钮时,利用JavaScript处理数据提交的过程。在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过...

    js打开关闭遮罩层

    在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并结合loading图片以增强用户体验。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,它可以直接在用户的浏览器中运行,...

    遮罩层js代码

    本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的JavaScript代码,它允许开发者创建具有多样性和自定义功能的遮罩层。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    JS遮罩层效果

    例如,如果遇到遮罩层在Firefox中无法完全覆盖的问题,可以尝试添加`z-index`属性以确保其位于最上方。 6. 动态调整遮罩层大小: 当页面内容发生变化时,可以监听`resize`事件,实时调整遮罩层的尺寸,确保始终...

    各种精美的js遮罩效果

    - **JavaScript遮罩**:JS可以通过修改DOM元素的CSS属性,如`style.backgroundColor`或`style.opacity`,来动态创建遮罩效果。还可以添加事件监听器,如点击事件,来触发遮罩的显示和隐藏。 3. **遮罩效果的应用...

    js 弹出遮罩层

    在JavaScript编程中,"弹出遮罩层"是一种常见的用户界面设计手法,它通常用于创建一个半透明的覆盖层,以突出显示特定区域或者暂停其他交互,为用户提供一种聚焦的体验。例如,当我们需要显示模态对话框、加载提示...

    JS遮罩插件( jquery 1.9后的版本 )

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够对用户界面进行实时更新和交互。在这个主题中,我们关注的是一个基于jQuery库的遮罩插件,适用于jQuery 1.9及更高版本。jQuery是...

    js 页面全部遮罩层

    "js 页面全部遮罩层"这个话题涉及到使用JavaScript(通常借助jQuery库)来实现全屏遮罩效果,包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解: 首先,我们需要理解遮罩层的基本概念。遮罩层通常...

    js 遮罩层源码

    封装遮罩层div显示效果,将其放在页面的div中加载

    css+js实现部分区域高亮可编辑遮罩层.docx

    "css+js实现部分区域高亮可编辑遮罩层" 本文主要介绍了使用css和js实现部分区域高亮可编辑遮罩层的方法。该方法使用javascript和css来实现遮罩层的效果,遮罩层可以高亮显示指定区域,并且可以编辑该区域。 知识点...

    JS遮罩效果,可用于弹出登录层

    就一个html文件,代码也很少,没有用Jquery。JS遮罩效果 遮罩效果 弹出登录层JS遮罩效果 遮罩效果 弹出登录层

Global site tag (gtag.js) - Google Analytics