我们以输入密码为例
首先,做一个页面,用作当遮罩效果出现时的对话框:
好了,遮罩效果实现了。需要注意的问题:
1、效果的实现是一个div和一个iframe来实现的
2、效果实现后,我们有一个提交,提交要如下实现:
[color=violet][b]下面是实现遮罩效果的文件,我已经打包,可以下载:[/b][/color]
首先,做一个页面,用作当遮罩效果出现时的对话框:
<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表单提交时加一个[color=red][b]target="_top"[/b][/color]
[color=violet][b]下面是实现遮罩效果的文件,我已经打包,可以下载:[/b][/color]