有的时候为了正在执行的操作,我们不想让用户现在对界面进行任何操作,只是让用户等待。这时,我们一般会锁定界面,给个进度条什么的。等用户的上次操作完成之后,又取消蒙层。这里参考相关资料弄个简单的:
<link rel="stylesheet" href="style/main_nonebg.css" type="text/css">
<style>
.content {
width: 220px;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
text-align: left;
}
.content2 {
width: 120px;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
text-align: left;
}
body,div {
text-align: center;
}
#lockbtn {
float: left;
margin-left: 50px;
cursor: hand;
}
#lockform,#locklayer {
position: absolute;
width: expression(this . parentNode . scrollWidth);
top: expression(this . parentNode . scrollTop); left =0;
height: 100%;
right: 0;
bottom: 0;
}
#lockform {
z-index: 1
}
#locklayer {
z-index: 1;
background-color: #AAA;
filter: alpha(opacity = 50);
}
#locktab {
position: absolute;
top: 250px;
left: expression(this . parentNode . scrollWidth/ 2 -150);
background-color: #FFFEFF;
z-index: 2;
width: 350px;
height: 30px;
border-style: double;
border-width: 2px;
border-color: green;
color: red;
font-size:20px;
font-face:italic;
}
</style>
function lock(menu) //开启蒙层{
menu.style.display="none"?'':''; //打开蒙版
document.cookie="lock=yes"; //设置cookies,使锁定长期有效,
}
function unlock(menu) //关闭蒙层
{
menu.style.display=""?'none':'none'; //去除蒙版,达到解锁
document.cookie="lock=no"; //设置cookie
return false;
}
<div id="lockform" style="display: none;">
<div id="locklayer">
<div id="locktab">
<center>
<img src="images/indicator.gif" width="20" height="20" /> 过程执行程序正在启动,请稍候...
</center>
</div>
</div>
</div>
然后在适当的时候调用开启蒙层方法和关闭蒙层就行了。
分享到:
相关推荐
html5蒙层效果,可以在效果才层内编辑所需要的内容
jQuery与Js实现屏幕蒙层效果
蒙层效果,适用于Android引导页的使用。
本篇文章主要介绍了Android 新手引导蒙层效果实现代码示例,具有一定的参考价值,有兴趣的可以了解一下。
可以看出这是由image组件和text组件叠加到一块组成的蒙层效果。 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置了position属性才会生效。 z-index:表示...
主要为大家详细介绍了Android实现新手引导半透明蒙层效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
android玻璃蒙层,模糊效果,毛玻璃效果,高斯模糊
主要为大家详细介绍了Android PopupWindow增加半透明蒙层,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Query实现的qq空间遮罩层相册切换特效源码,鼠标点击图片弹出带左右箭头遮罩效果图片,可通过点击切换显示图片。整体效果简洁自然。是一款非常实用的优秀源码。该源码兼容目前最新的各类主流浏览器。
但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为。 那么,如何阻止呢?请看以下分析: 方案分析 方案一 打开蒙层时,给...
鼠标光标移动至图片上时,图片下面会出现一层阴影,阴影部分会对显示出对图片内容的介绍
有些时候需要自己实现蒙板效果和弹出层的效果,这是一个简单的实现网页蒙板效果和弹出层的html示例
主要介绍了SCSS移动端页面遮罩层效果的实现及常见问题解决,使用CSS的预处理器框架SCSS写起来比原生CSS会来得更加简便一些,需要的朋友可以参考下
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助
资源很好,很实用,代码少简单易懂,很随时用在项目中,并且使用的效果也很好!
这是一款HTML5 SVG炫酷遮罩层动画效果。该效果是在用户点击汉堡包按钮间隙全屏菜单显示时,页面的切换采用SVG图形变形的方式进行过渡动画,共6种SVG遮罩层过渡动画效果。
通过js实现的div遮罩层的效果,相当于锁住全屏,只能操作当前的弹出框操作。
弹出层现成代码 博文链接:https://xllily.iteye.com/blog/955776