`
lingbing777
  • 浏览: 11327 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

遮罩层

js 
阅读更多
function showLoad(tipInfo) {
var iWidth = 120; //弹出窗口的宽度;
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 = 'red';
eTip.style.padding = '5px 15px';
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;
eTip.style.left = v_left + 'px';
eTip.style.top = v_top + 'px';
eTip.style.textAlign="center";
eTip.innerHTML = "<img style='margin:0 auto;' src='Images/loading.gif' /><br/><span style='color:#0df; font-size:16px'>"+ tipInfo +"</span>";
try {
document.body.appendChild(eTip);
} catch (e) { }
$("#tipDiv").css("float", "right");
$("#tipDiv").css("z-index", "99");
$('#tipDiv').show();
ShowMark();
}
function closeLoad() {
$('#tipDiv').hide();
HideMark();
}

//显示蒙灰层
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 = "#f3f2f3";
xp_mark.style.zIndex = "1";
if (document.all) {
xp_mark.style.filter = "alpha(opacity=50)";
var Ie_ver = navigator["appVersion"].substr(22, 1);
if (Ie_ver == 6 || Ie_ver == 5) { hideSelectBoxes(); }
}
else { xp_mark.style.opacity = "0.5"; }
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(); }
}
分享到:
评论

相关推荐

    点击遮罩层的背景关闭遮罩层

    class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩

    winform实现遮罩层效果

    在Windows Forms(Winform)开发中,遮罩层(Mask Layer)通常被用来提供一种半透明的覆盖层,用于在用户界面(UI)上显示等待、加载或提示信息,同时阻止用户与背景界面进行交互。它是一种常见的用户体验设计元素,...

    js打开关闭遮罩层

    在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面内容,引导用户注意力或者在加载数据时提供视觉反馈。在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并...

    动态上传文件遮罩层

    在IT行业中,动态上传文件和遮罩层是前端开发中常见的功能需求,尤其在交互体验设计上占有重要地位。本文将详细阐述“动态上传文件遮罩层”这一主题,包括其概念、实现原理以及js插件的应用。 首先,动态上传文件指...

    JS移动端点击弹出遮罩层

    在这个例子中,我们需要一个按钮触发遮罩层的显示,并且需要一个遮罩层元素本身: ```html &lt;!DOCTYPE html&gt; , initial-scale=1.0"&gt; &lt;title&gt;JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...

    C# 自定义半透明遮罩层

    在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...

    jsp页面加载之遮罩层

    "jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中,如何使用遮罩层来提升用户体验,尤其是在等待页面完全加载时提供一种视觉反馈,让用户知道页面正在处理。 首先,遮罩层通常是一个半透明的div元素,...

    C# WinForm遮罩层

    在C# WinForm开发中,遮罩层(通常称为Mask Layer或Overlay)是一个重要的设计元素,它用于在用户界面(UI)上显示一个半透明或全透明的覆盖层,以防止用户在特定操作进行时误操作。遮罩层通常用在加载数据、执行长...

    asp.net 遮罩层 asp.net 遮罩层

    在ASP.NET中,我们经常会遇到需要实现遮罩层(Modal)的需求,以提供更好的用户体验,例如显示警告信息、加载提示或者弹出窗口等。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    在iframe 中页面中设置遮罩遮罩层

    在网页设计中,有时我们需要在页面中添加一个遮罩层,以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top....

    AlertDialog对话框 实现遮罩层

    在很多场景下,我们希望在弹出`AlertDialog`时,背景界面被一个半透明的遮罩层覆盖,以突出对话框并降低背景界面的干扰。本篇文章将深入探讨如何在Android中自定义实现`AlertDialog`的遮罩层。 首先,理解遮罩层的...

    微信小程序全屏遮罩层代码

    在微信小程序中,全屏遮罩层是一种常见的交互设计元素,通常用于显示加载提示、弹窗确认、模态对话框等场景。它会在用户界面的顶部覆盖一层半透明或者完全不透明的背景,使得用户专注于当前操作而不会被其他元素分散...

    页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮

    页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。

    微信跳转 微信遮罩层.zip

    在IT行业中,微信跳转和微信遮罩层是常见的移动端应用功能,特别是在电商和营销领域。这个名为"微信跳转 微信遮罩层.zip"的压缩包文件可能包含了一个实现此类功能的源码资源。下面我们将深入探讨这两个概念及其在...

    自定义半透明遮罩层

    在网页设计和开发中,自定义半透明遮罩层是一种常见的视觉效果,它通常用于创建交互式的用户体验,比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域,通过半透明黑色或灰色背景,使用户聚焦...

    微信判断浏览器自动弹出遮罩层代码

    在开发微信相关的网页应用时,有时我们需要针对微信内置浏览器(X5内核)做一些特定的适配,例如自动弹出遮罩层。这是因为微信浏览器在某些情况下,如打开外部链接时,可能会有自己的行为,比如自动加载微信的分享...

    点击弹出浮动层 弹出遮罩层

    这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景,用户点击某一元素后,一个半透明的遮罩层会覆盖整个页面,同时一个浮动层(通常包含更多信息或功能)在屏幕中央出现。以下是对这个主题的详细解释: ...

    漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

    微信小程序-自定义组件-遮罩层

    遮罩层,也称为蒙层,是一种常见的UI元素,用于在页面上创建半透明的覆盖层,通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此,我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 ...

    CSS3 实现Loading加载,页面遮罩层的应用

    在移动H5领域,用户体验是至关重要的,而Loading加载和页面遮罩层是提升用户体验的两个关键元素。本文将深入探讨如何使用CSS3来实现这两种功能,并解释它们在实际应用场景中的重要性。 首先,让我们来了解什么是...

Global site tag (gtag.js) - Google Analytics