<style type="text/css">
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}
</style>
<script type="text/javascript">
function ShowDIV(thisObjID) {
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#" + thisObjID ).css("top", "100px");
$("#" + thisObjID ).css("display", "block");
}
function closeDiv(thisObjID) {
$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}
</script>
jsp代码
<div id="BgDiv"></div>
<!--遮罩层显示的DIV1-->
<div id="DialogDiv" style="display:none">
<h2>弹出层<input type="button" value="关闭" onclick = "closeDiv('DialogDiv')"/></h2>
<div class="form">我是弹出对话框111111！！</div>
</div>
<p>
<input value="弹出遮罩层1" type="button" id="btnShow1" onclick="ShowDIV('DialogDiv')" />
</p>
////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery遮罩层</title>
<style type="text/css">
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}
#DialogDiv2{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv2 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv2 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv2 .form{padding:10px;}
#DialogDiv3{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv3 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv3 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv3 .form{padding:10px;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowDIV(thisObjID) {
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#" + thisObjID ).css("top", "100px");
$("#" + thisObjID ).css("display", "block");
document.documentElement.scrollTop = 0;
}
function closeDiv(thisObjID) {
$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}
</script>
</head>
<body>
<div id="BgDiv"></div>
<!--遮罩层显示的DIV1-->
<div id="DialogDiv" style="display:none">
<h2>弹出层<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">关闭</a></h2>
<div class="form">我是弹出对话框111111！！</div>
</div>
<!--遮罩层显示的DIV2-->
<div id="DialogDiv2" style="display:none">
<h2>弹出层<a href="#" id="btnClose2" onclick="closeDiv('DialogDiv2')">关闭</a></h2>
<div class="form">我是弹出对话框2222！！</div>
</div>
<!--遮罩层显示的DIV3-->
<div id="DialogDiv3" style="display:none">
<h2>弹出层<a href="#" id="btnClose3" onclick="closeDiv('DialogDiv3')">关闭</a></h2>
<div class="form">我是弹出对话框3333333！！</div>
</div>
<p>
<input value="弹出遮罩层1" type="button" id="btnShow1" onclick="ShowDIV('DialogDiv')" />
<input value="弹出遮罩层2" type="button" id="btnShow2" onclick="ShowDIV('DialogDiv2')" />
<input value="弹出遮罩层3" type="button" id="btnShow3" onclick="ShowDIV('DialogDiv3')" />
</p>
</body>
</html>
相关推荐
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
在Windows Forms（Winform）开发中，遮罩层（Mask Layer）通常被用来提供一种半透明的覆盖层，用于在用户界面（UI）上显示等待、加载或提示信息，同时阻止用户与背景界面进行交互。它是一种常见的用户体验设计元素，...
在网页开发中，遮罩层（Mask Layer）是一种常见的用户界面元素，用于暂时遮盖页面内容，引导用户注意力或者在加载数据时提供视觉反馈。在本主题中，我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭，并...
在IT行业中，动态上传文件和遮罩层是前端开发中常见的功能需求，尤其在交互体验设计上占有重要地位。本文将详细阐述“动态上传文件遮罩层”这一主题，包括其概念、实现原理以及js插件的应用。 首先，动态上传文件指...
在C#编程中，创建一个自定义的半透明遮罩层是常见的需求，尤其是在开发桌面应用或者游戏界面时，为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先，我们需要理解遮罩层的...
在这个例子中，我们需要一个按钮触发遮罩层的显示，并且需要一个遮罩层元素本身： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>JS移动端点击弹出遮罩层 .mask { position: fixed; top: 0; ...
在C# WinForm开发中，遮罩层（通常称为Mask Layer或Overlay）是一个重要的设计元素，它用于在用户界面（UI）上显示一个半透明或全透明的覆盖层，以防止用户在特定操作进行时误操作。遮罩层通常用在加载数据、执行长...
"jsp页面加载之遮罩层"这个主题关注的是在JSP页面加载过程中，如何使用遮罩层来提升用户体验，尤其是在等待页面完全加载时提供一种视觉反馈，让用户知道页面正在处理。 首先，遮罩层通常是一个半透明的div元素，...
在ASP.NET中，我们经常会遇到需要实现遮罩层（Modal）的需求，以提供更好的用户体验，例如显示警告信息、加载提示或者弹出窗口等。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
在网页设计中，有时我们需要在页面中添加一个遮罩层，以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能，结合`right.html`, `main.html`, `left.html`, `top....
在很多场景下，我们希望在弹出`AlertDialog`时，背景界面被一个半透明的遮罩层覆盖，以突出对话框并降低背景界面的干扰。本篇文章将深入探讨如何在Android中自定义实现`AlertDialog`的遮罩层。 首先，理解遮罩层的...
在开发微信相关的网页应用时，有时我们需要针对微信内置浏览器（X5内核）做一些特定的适配，例如自动弹出遮罩层。这是因为微信浏览器在某些情况下，如打开外部链接时，可能会有自己的行为，比如自动加载微信的分享...
页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。...所以选择弹出层，一层遮罩层，一层显示详情层，遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置，防止页面出现错误。
在微信小程序中，全屏遮罩层是一种常见的交互设计元素，通常用于显示加载提示、弹窗确认、模态对话框等场景。它会在用户界面的顶部覆盖一层半透明或者完全不透明的背景，使得用户专注于当前操作而不会被其他元素分散...
在IT行业中，微信跳转和微信遮罩层是常见的移动端应用功能，特别是在电商和营销领域。这个名为"微信跳转 微信遮罩层.zip"的压缩包文件可能包含了一个实现此类功能的源码资源。下面我们将深入探讨这两个概念及其在...
在网页设计和开发中，自定义半透明遮罩层是一种常见的视觉效果，它通常用于创建交互式的用户体验，比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域，通过半透明黑色或灰色背景，使用户聚焦...
这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景，用户点击某一元素后，一个半透明的遮罩层会覆盖整个页面，同时一个浮动层（通常包含更多信息或功能）在屏幕中央出现。以下是对这个主题的详细解释： ...
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此，我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 ...
在移动H5领域，用户体验是至关重要的，而Loading加载和页面遮罩层是提升用户体验的两个关键元素。本文将深入探讨如何使用CSS3来实现这两种功能，并解释它们在实际应用场景中的重要性。 首先，让我们来了解什么是...