/* 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
分享到:
相关推荐
js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层
"JS遮罩插件"是JavaScript编程中的一种常见工具,它主要用于创建覆盖在页面元素上的半透明层,通常用于加载提示、弹窗、对话框或阻止用户在特定操作期间与页面其余部分互动。 遮罩插件的工作原理通常是通过CSS设置...
JavaScript 遮罩层插件是一种常见的前端开发工具,它用于在页面上创建一个半透明的覆盖层,通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中,我们讨论的插件可能名为“LoadMask”或者“lwb_...
在JavaScript编程中,"JS遮罩窗口"是一个常见的功能,用于在网页上创建一个半透明的覆盖层,通常用于显示弹出式对话框、加载提示或者阻塞用户交互直到特定操作完成。这种技术增强了用户体验,因为遮罩可以使得背景...
在前端开发中,JavaScript(简称JS)是一种必不可少的脚本语言,用于实现动态交互效果,增强用户体验。在本文中,我们将深入探讨一个重要的前端技术——遮罩层(Mask),以及如何在实际项目中结合Ajax使用它。遮罩层...
通过以上步骤,我们就实现了一个基本的JavaScript遮罩层。当然,这个遮罩层还可以进一步优化,比如添加过渡动画、响应式设计、兼容性处理等。在实际开发中,可以结合现有的库和框架,如jQuery或Vue.js,来更高效地...
JavaScript图片展示遮罩特效是一种常见的网页交互设计,它在用户将鼠标悬停在图片上时,会自动弹出一个半透明的遮罩层,显示更详细的图片信息或提供额外的操作选项。这种效果常用于相册浏览、产品展示、游戏交互等...
js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
"遮罩层 javascript js 数据提交"这个主题涉及到的是如何在JavaScript中实现一个遮罩层,并在用户点击提交按钮时,利用JavaScript处理数据提交的过程。在此过程中,遮罩层的出现和消失以及提交操作的执行,都是通过...
在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并结合loading图片以增强用户体验。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言,它可以直接在用户的浏览器中运行,...
本主题聚焦于"遮罩层js",这是一个基于jQuery和sliphover库实现的JavaScript代码,它允许开发者创建具有多样性和自定义功能的遮罩层。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
例如,如果遇到遮罩层在Firefox中无法完全覆盖的问题,可以尝试添加`z-index`属性以确保其位于最上方。 6. 动态调整遮罩层大小: 当页面内容发生变化时,可以监听`resize`事件,实时调整遮罩层的尺寸,确保始终...
- **JavaScript遮罩**:JS可以通过修改DOM元素的CSS属性,如`style.backgroundColor`或`style.opacity`,来动态创建遮罩效果。还可以添加事件监听器,如点击事件,来触发遮罩的显示和隐藏。 3. **遮罩效果的应用...
在JavaScript编程中,"弹出遮罩层"是一种常见的用户界面设计手法,它通常用于创建一个半透明的覆盖层,以突出显示特定区域或者暂停其他交互,为用户提供一种聚焦的体验。例如,当我们需要显示模态对话框、加载提示...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够对用户界面进行实时更新和交互。在这个主题中,我们关注的是一个基于jQuery库的遮罩插件,适用于jQuery 1.9及更高版本。jQuery是...
"js 页面全部遮罩层"这个话题涉及到使用JavaScript(通常借助jQuery库)来实现全屏遮罩效果,包括阻止鼠标滚动和键盘上下键的操作。以下是对这个主题的详细讲解: 首先,我们需要理解遮罩层的基本概念。遮罩层通常...
封装遮罩层div显示效果,将其放在页面的div中加载
"css+js实现部分区域高亮可编辑遮罩层" 本文主要介绍了使用css和js实现部分区域高亮可编辑遮罩层的方法。该方法使用javascript和css来实现遮罩层的效果,遮罩层可以高亮显示指定区域,并且可以编辑该区域。 知识点...
就一个html文件,代码也很少,没有用Jquery。JS遮罩效果 遮罩效果 弹出登录层JS遮罩效果 遮罩效果 弹出登录层