<!DOCTYPE html>
<html>
<head>
<title>遮罩函数</title>
<meta charset="UTF-8"/>
<style type="text/css">
#zhezhao{
width: 100%;
height: 100%;
background: gray;
display:none;
position: absolute;
left: 0;
top: 0;
}
#contains{
width: 520px;
height: auto;
background: #fff;
display: none;
position: absolute;
left: 400px;
top: 70px;
}
</style>
<script type="text/javascript">
function show(){
document.getElementById("zhezhao").style.display="block";
document.getElementById("contains").style.display="";
document.getElementById("zhezhao").style.filter="Alpha(Opacity=50)";
}
function hide(){
document.getElementById("zhezhao").style.display="none";
document.getElementById("contains").style.display="none";
}
</script>
</head>
<body>
<input type="button" value="显示遮罩" onclick="show()"/>
<div id="zhezhao">
<form>
<p><label>请输入用户名:</label><input type="text" name="name"/></p>
<p><label>请输入密码:<input type="password"name="pwd"/></label></p>
<input type="button" value="隐藏遮罩" onclick="hide()"/>
</form>
</div>
<div id="contains">
</div>
</body>
</html>
分享到：
相关推荐
WestLife组合人物介绍——移动遮罩高亮显示动态特效PPT模板.ppt
西城男孩（WestLife）组合人物介绍，WestLife人物档案，连续移动遮罩高亮显示人物头像然后停留弹出人物档案信息，适合人物或者团队介绍的动态ppt模板。
鼠标到达的地方可以看到图片，运用遮罩层实现，一个课堂作业。源程序。
图片切换特效，图片遮罩切换幻灯片特效模板。
《Flash动画制作——遮罩动画》教学设计.pdf
安卓Android源码——遮罩层效果.zip
FLASH动画制作——遮罩效果”教学设计及教学反思.docx
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考，具体如下： 运行效果图如下： 完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
jQuery炫酷鼠标滑过图片显示遮罩层特效是一款基于jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。
微信浏览器内显示遮罩层提示点击右上角，选择在浏览器中打开链接
6种炫酷的鼠标滑过图片显示遮罩层特效。
JS变灰页面显示遮罩层登录窗口，使页面无法操作 JS变灰页面显示遮罩层登录窗口，使页面无法操作
查询显示遮罩层
用deffer解决由于页面的渲染和JavaScript线程的冲突导致的页面假死，对于循环里面有ajax的可以在循环外面定义一个空的数组，每执行一次ajax，往数组里面push一个值，当数组长度等于循环长度时，再用resolve跳出。...
jquery制作鼠标悬浮图片显示遮罩标题效果
这是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息，Bootstrap鼠标悬停图片遮罩特效代码。
jquery鼠标悬停上下显示遮罩标题与内容是一款基于jquery实现的鼠标悬停显示遮罩里面的标题跟描述。
jquery hover鼠标悬停遮罩显示是一款图片网格布局的鼠标悬停动画显示遮罩效果。
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。...所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。