//删除页面遮罩层
function deleteMaskLayer()
{
$("#bgDiv,#loadingDiv").remove();
}
//添加页面遮罩层
///
function addMaskLayer() {
initialize(); //为页面添加遮罩
document.onreadystatechange = subSomething; //监听加载状态改变
}
function initialize() {
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" );
bgObj.setAttribute( 'id', 'bgDiv' );
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#000000";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
bgObj.style.opacity = "0.2";
bgObj.style.left = "0";
bgObj.style.width = bodyWidth + "px";
bgObj.style.height = bodyHeight + "px";
bgObj.style.zIndex = "10000"; //设置它的zindex属性,让这个div在z轴最大,用户点击页面任何东西都不会有反应|
document.body.appendChild(bgObj); //添加遮罩
var loadingObj = document.createElement("div");
loadingObj.setAttribute( 'id', 'loadingDiv' );
loadingObj.style.position = "absolute";
loadingObj.style.top = bodyHeight / 2 - 32 + "px";
loadingObj.style.left = bodyWidth / 2 + "px";
loadingObj.style.background = "url(../wms/webpage/login/css/loading.gif)" ;
loadingObj.style.width = "32px";
loadingObj.style.height = "32px";
loadingObj.style.zIndex = "10000";
document.body.appendChild(loadingObj); //添加loading动画-
}
function subSomething() {
if (document.readyState == "complete" ) //当页面加载完毕移除页面遮罩,移除loading动画-
{
removecloud();
}
}
分享到:
相关推荐
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
应用移动H5领域。CSS3 实现Loading加载,页面遮罩层的应用。
NULL 博文链接:https://2814704901.iteye.com/blog/1955402
JSP页面增加遮罩
页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。
JS变灰页面显示遮罩层登录窗口,使页面无法操作 JS变灰页面显示遮罩层登录窗口,使页面无法操作
( 页面加载中(遮罩层、模拟查询、模拟隐藏、模拟刷新、全屏遮罩、兼容ie、谷歌、火狐等浏览器)
主要介绍了jQuery实现的页面遮罩层功能,结合完整实例形式详细分析了jQuery遮罩层实现步骤与相关操作技巧,需要的朋友可以参考下
GitHub上人们分享的遮罩层插件也是玲琅满目,不过自己动手做一个的话肯定更复合自己的需求,这里就带大家来看使用jQuery制作Web页面遮罩层插件的实例教程,需要的朋友可以参考下
Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
可以记录用户在页面上的停留时间 并且还有遮罩层的效果,最小化和最大化都不影响遮罩的效果
主要介绍了SCSS移动端页面遮罩层效果的实现及常见问题解决,使用CSS的预处理器框架SCSS写起来比原生CSS会来得更加简便一些,需要的朋友可以参考下
实现弹出遮罩层的方法有很多种,接下来本文给大家介绍通过jquery操作dom实现弹出页面遮罩层以及web端和移动阻止遮罩层的滑动,对页面弹出遮罩层的相关知识感兴趣的朋友一起看看吧
主要功能是在页面点击“用户登录”,就在当前页面弹出用户登窗口。...这里是用“遮罩层”来实现的。界面也是自己做的。 里面有相应的登录界面的素材。在页面的布局上,你查看本例,也可以学习到很多关于css的知识。
自定义半透明遮罩层
带遮罩层的普通窗口 不带遮罩层 在调用页面关闭弹出的窗口 关闭窗口并刷新或跳转调用页面
NULL 博文链接:https://gjp014.iteye.com/blog/2001946
js遮罩全部页面,包括鼠标滚动,和上下键的控制,引用jquery编写,调用时需依赖jquery,
C#语言开发WP8.0实现遮罩层,弹出层在遮罩层上方的代码实例