我们以输入密码为例
首先，做一个页面，用作当遮罩效果出现时的对话框：
<html>
<head>
<script>
function CheckData()
{
var pwd = document.getElementById("txtLinkMan").value;
if(pwd==""){
alert("请输入密码");
return false;
}
}
function HideCorrent()
{
parent.document.getElementById('mbDIV').style.display='none';
parent.document.getElementById('Correntiframe').style.display='none';
}
</script>
<style>
body{margin:0;padding:0; font-size:12px; color:#333; width:100%;}
.MissTD{white-space:nowrap; padding-left:10px; height:35px; font-size:12px; color:Black;}
.MissTable{border-collapse:collapse; border: 1px solid ACB9C2;}
</style>
</head>
<body style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<form name="form1" method="post" action="" id="form1" target="_top">
<table style="width: 403px;" class="MissTable" border="1" cellpadding="0" cellspacing="0" rules="none">
<tr>
<td colspan="2">
<table class="MissTable" border="1" cellpadding="0" cellspacing="0" rules="none" width="100%" frame="below">
<tr>
<td style="width: 23px; height: 22px;background-image:url(images/2.jpg);" ><img src="images/8.jpg"></td>
<td style="width: 354px;background-image:url(images/2.jpg);"></td>
<td style="background-image:url(images/2.jpg);"><img src="images/4.jpg" style="cursor: pointer;" onclick="HideCorrent()"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="MissTD" align="right">请输入密码：</td>
<td class="MissTD">
<input name="txtLinkMan" id="txtLinkMan" type="text">
</td>
</tr>
<tr>
<td colspan="2" style="height: 35px; padding-bottom: 5px;" align="center" valign="bottom">
<input name="imgBtnConfirm" id="imgBtnConfirm" src="images/6.jpg" onclick="return CheckData();" style="border-width: 0px;" type="image">
</td>
</tr>
</table>
</form>
</body></html>
我们用另一个网页将上面这个网页用iframe引入，实现css效果
<style type="text/css">
<!--
html
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#dt_3
{
cursor: pointer;
}
#Correntiframe{ position:absolute;top:50%;left:50%;border:0px;width:403px; height:131px; z-index:10001;margin-top: -200px; margin-left: -250px;}
div#mbDIV
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #AAAAAA;
z-index: 10000;
filter: alpha(opacity = 50);opacity:0.6;
}
-->
</style>
<div id="mbDIV" style="display: block;"></div>
<iframe id="Correntiframe" src="pwd.htm" scrolling="no" frameborder="0" style="display:block" ></iframe>
好了，遮罩效果实现了。需要注意的问题：
1、效果的实现是一个div和一个iframe来实现的
2、效果实现后，我们有一个提交，提交要如下实现：
<form name="form1" method="post" action="" id="form1" target="_top">
这里的form表单提交时加一个
target="_top"
下面是实现遮罩效果的文件，我已经打包，可以下载：
分享到：
相关推荐
遮罩效果10种
易语言八方向拖动遮罩效果源码,八方向拖动遮罩效果,组件_外形框移动,组件_外形框显示,位图_亮度调节
HTML5+CSS3 制作的图片半透明遮罩效果
JQuery鼠标悬停向上滑出遮罩效果是一款多个图片列表排列后，鼠标悬停在其中一个图片上后，显示标题以及图片文字介绍效果。
几种漂亮的html遮罩效果
最近在做新手指导相关的东西，需要用到遮罩的效果，就查找资料整理了一个遮罩效果，自己测试正常后在游戏中正常使用中
这是一款使用html5 svg和css3制作的全屏遮罩效果导航菜单。这款全屏遮罩效果导航菜单共有13种不同的效果。有多种效果使用html5 Snap.svg完成，最酷的要数阿拉丁神灯效果。
参考链接：https://blog.csdn.net/caoshangpa/article/details/53053409
纯CSS3实现的动画遮罩效果 当鼠标悬停在图片上，会从右上角一个沿着逆时针方向旋转过来的动画效果 鼠标移走后遮罩复位 使用方法： 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 ...
jQuery旅游网从左到右滑出遮罩效果是一款结合CSS3动画效果实现的鼠标悬停图片文字动画特效。
就一个html文件，代码也很少，没有用Jquery。JS遮罩效果 遮罩效果 弹出登录层JS遮罩效果 遮罩效果 弹出登录层
一款jQuery代码结合CSS3动画效果实现的旅游网站常用到的鼠标悬停图片从左到右滑出遮罩效果图片文字动画特效。
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px;... 鼠标悬停后显示动画遮罩效果 鼠标移走后遮罩也跟着move out 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
用代码实现遮罩效果，里面有源代码，可以参考学习。
html遮罩效果样式，html静态页，CSS样式控制遮罩效果
baidupopup最好的遮罩效果，可以给的网页做好的效果。
Cocos2d-x实现遮罩效果
利用C#生成一种遮罩图像效果，图像被一个遮罩层挡住，然后由两边向中间显示，最终显示出图像，主要功能是为显示图像增加动态效果，避免单调死板，也希望通过这个小例子，让大家明白一些C#有关的图像遮罩效果。
自定义的ImageView实现图片圆形遮罩效果，详细了解请移步http://blog.csdn.net/zxc514257857/article/details/63834235
flash动画遮罩效果代码flash动画遮罩效果代码