我们以输入密码为例
首先，做一个页面，用作当遮罩效果出现时的对话框：
<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"
下面是实现遮罩效果的文件，我已经打包，可以下载：
分享到：
相关推荐
在Qt编程中，实现遮罩窗口（mask window）是...总的来说，Qt提供了丰富的工具和接口，使得创建具有遮罩效果的窗口变得简单易行。通过理解并运用上述技术，开发者可以轻松地为自己的应用程序添加美观且实用的遮罩功能。
在网页设计和开发中，遮罩效果是一种常用的技术，它能为页面增添视觉吸引力和交互性。"10种遮罩效果"这个主题涵盖了多种不同的遮罩应用方式，旨在提升用户体验和网页设计的艺术性。遮罩效果通常是通过CSS（层叠样式...
在这个"易语言八方向拖动遮罩效果"项目中，我们主要关注的是如何实现一个在用户交互下能够进行八方向拖动的遮罩效果。 首先，我们要理解什么是遮罩效果。在图形用户界面（GUI）设计中，遮罩通常用于部分隐藏或突出...
CSS3则提供了实现遮罩效果的关键工具，主要通过以下几种方式： 1. **伪元素**：我们可以利用`::before`或`::after`伪元素在图像上方添加一层半透明的颜色。例如： ```css .image-container::before { content: ...
在本文中，我们将深入探讨如何实现一个基于jQuery的鼠标悬停向上滑出遮罩效果，这是一个常见的交互式设计，常用于展示多张图片并提供详细信息。这种效果可以使用户在不离开当前页面的情况下轻松获取更多关于图片的...
一、纯CSS遮罩效果 1. 图片遮罩：通过设置`<img>`标签的伪元素`::before`或`::after`，并设定其背景颜色和透明度，可以为图片添加遮罩。例如： ```css img { position: relative; } img::before { content: ''; ...
在网页设计中，JavaScript（JS）和CSS常常被用来创建动态和交互性的用户体验，其中一种常见应用就是遮罩效果。遮罩效果可以增强网站的视觉吸引力，为用户提供更丰富的信息展示方式，比如在图片上添加半透明覆盖层，...
"JQuery 鼠标悬浮，图片遮罩效果"就是一种常见的交互设计，它使得用户在鼠标悬停在图片上时，图片会出现一层半透明的遮罩层，通常用于展示额外信息或者作为点击触发的视觉提示。这种效果可以增加网站的动态感和专业...
在这款导航菜单中，SVG被用来创建动态遮罩效果，比如阿拉丁神灯效果，用户在与之交互时，可以感受到如同魔法般的动画变化，提升整体的视觉享受。 CSS3在这款导航菜单中的应用同样不可或缺。CSS3引入了诸如过渡、...
【jQuery旅游网从左到右滑出遮罩效果】是一个基于JavaScript库jQuery和CSS3技术实现的网页交互特效。此特效主要用于提升旅游网站的用户体验，当用户将鼠标悬停在图片上时，会有一个遮罩层从左至右滑动出现，展示与...
在网页设计和开发中，遮罩效果是一种常见的视觉设计手法，它可以用来添加额外的信息、创建过渡效果或增强用户的交互体验。本教程将详细介绍如何利用代码实现遮罩效果，并提供源代码供参考学习。 首先，遮罩效果通常...
在本示例中，我们关注的是一个用于旅游网站的交互式图像展示技术，具体是"旅游网鼠标悬停图片从左到右滑出遮罩效果jQuery代码"。这个功能为用户提供了更丰富的视觉体验，当鼠标悬停在图片上时，会有一个遮罩层从左侧...
在Cocos2d-x中，遮罩效果是一种常见的视觉特效，它允许开发者控制一个显示对象（如精灵、层或场景）的可见部分，从而创造出各种有趣的设计，比如半透明效果、形状切割等。本文将深入探讨如何在Cocos2d-x中实现遮罩...
在Android开发中，遮罩效果（Mask Effect）是一种常见的视觉设计技术，用于在特定区域上隐藏或显示内容，常用于创建各种动态效果，如按钮、加载动画、提示信息等。本篇文章将深入探讨如何在Android中实现圆形遮罩、...
在网页设计和开发中，"遮罩效果"是一种常见的视觉技术，用于在页面上创建半透明或全透明的覆盖层，以突出显示特定内容或执行某些交互操作。"baidupopup"可能指的是百度公司使用的一种弹出窗口或提示框，这种窗口在...
通过这种方式，我们可以创建一个既美观又独特的平行四边形图片遮罩效果，结合了Canvas的动态绘制能力和CSS的样式控制。这在网页设计中非常有用，可以为用户提供引人入胜的视觉体验。在实际项目中，还可以根据需求...
在本文中，我们将深入探讨如何在cocos2d中实现遮罩效果，这对于创建各种交互式游戏元素，如新手引导、隐藏区域或特效是非常重要的。 首先，我们要理解什么是遮罩效果。遮罩效果是一种图像处理技术，它允许我们通过...
网站网页遮罩效果是网页设计中一种常见的交互技术，它用于在页面上创建一个半透明或全透明的层，覆盖在原有内容之上，通常用于加载提示、弹窗对话框、广告展示或者用户操作反馈等场景。遮罩效果的实现涉及到了前端...
在探讨“Flash动画遮罩效果代码”的过程中，我们首先需要理解Flash动画以及遮罩效果的基本概念，随后深入解析代码逻辑，以实现动态遮罩效果。 ### Flash动画与遮罩技术 Flash，作为一款广泛应用于网页动画、游戏...