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事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单...这里使用一些视觉差小把戏使遮罩层消失:我们为可见元素设置transition delay使透明度首先开始改变。 其他一些demo中我们使用了Snap.svg来制作SVG路径变形动画。
js 打开关闭遮罩层 loading图片
在winform中实现的遮罩层效果
带图片的动态上传文件,js插件,带遮罩层
Android AlertDialog对话框 自定义实现遮罩层
Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
遮罩层的图片
Javascript实现移动端点击按钮弹出遮罩层,自适应移动端屏幕大小。
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
自定义半透明遮罩层
包含两个页面和一张百度网址的二维码图片,index-flex.html展示的是flex布局绝对居中写法和遮罩层点击空白处关闭的方法一。index-transform.html展示的是利用transform属性偏移进行绝对居中和遮罩层点击空白处关闭的...
遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
微信小程序-自定义组件-遮罩层-规则内容显示
微信小程序全屏遮罩层代码。代码简洁,适合定制开发。