遮罩效果

最新推荐文章于 2025-09-04 00:15:00 发布

最新推荐文章于 2025-09-04 00:15:00 发布 · 145 阅读

文章标签：

#CSS #HTML

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用HTML、CSS与JavaScript创建带有遮罩效果的密码输入对话框，包括页面布局、样式设置及交互逻辑。

我们以输入密码为例
首先，做一个页面，用作当遮罩效果出现时的对话框：


<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]