<!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>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
</script>
<style type="text/css">
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="hidediv();" />
</div>
</body>
</html>
原文地址：http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html
分享到：
相关推荐
以上代码展示了如何通过JavaScript监听事件并在适当的时候显示或隐藏遮罩层。你可以根据项目需求调整这些示例，例如添加动画效果、交互逻辑等。 在实际开发中，遮罩层的应用非常广泛，如加载提示、弹窗提示、表单...
遮罩层的实现原理是使用一个绝对定位的DIV元素来遮罩整个页面，然后使用css样式来控制遮罩层的显示和隐藏。例如，可以使用`position`属性来设置遮罩层的定位方式，使用`top`和`left`属性来设置遮罩层的位置，使用`...
虽然本文没有详细说明交互触发机制，但一般遮罩层弹框的显示与隐藏会通过JavaScript事件来控制。常见的触发事件有按钮点击、页面加载完成等。JavaScript代码示例如下： ```javascript // 假设有一个按钮，点击后显示...
最后，使用JavaScript实现遮罩层的显示和隐藏功能。这里我们可以监听DOM加载事件，然后添加事件监听器来控制遮罩层的显示和关闭。 ```javascript // mask-layer.js document.addEventListener('DOMContentLoaded', ...
在"CustomDiv"这个文件中，我们可以推测这可能包含了一段代码示例，演示如何创建一个具有上述特性的对话框：可刷新的模式对话框、可移动的div以及遮罩层。实现这样的功能通常涉及到以下几个步骤： 1. **创建模式...
### DIV遮罩层：一种简单高效的工作区域遮罩方法 在网页设计与开发领域，DIV遮罩层是一种常用的UI技术，用于暂时性地遮挡页面的其他部分，从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、...
然后，通过JavaScript库JQuery，我们可以轻松地实现遮罩层的动态显示和隐藏。JQuery提供了一种简洁的API来操作DOM元素，使得添加事件监听器、修改样式属性和控制动画变得更加简单。例如，当用户点击某个按钮时，可以...
总结来说，这个项目展示了如何结合jQuery的事件处理能力和CSS3的动画特性，创建一个动态的、用户交互的图片翻转效果，同时通过遮罩层增强视觉体验。对于希望提升网页互动性的开发者来说，这是一个值得学习和借鉴的...
本文将详细介绍如何使用`div+css`构建框架，并实现全屏遮罩加载特效。 首先，理解`div+css`的基础知识至关重要。`div`是HTML中的一个块级元素，它可以用来对网页内容进行区域划分，而`CSS`（层叠样式表）则负责控制...
然后，通过`JavaScript`来控制遮罩层和弹出层的显示和隐藏。可以使用`addEventListener`监听用户的点击事件，或者根据特定条件自动触发弹出。例如，当用户点击某个按钮时显示弹出层： ```javascript document....
JS+CSS 实现遮罩居中弹出层（随浏览器窗口滚动条滚动） 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示，且随着浏览器窗口的滚动而滚动。 ...
遮罩层是一种全屏覆盖的半透明层，用于在特定操作（如加载、弹窗、提示信息）期间隐藏页面内容，提供视觉焦点并防止用户误操作。在CSS中，我们可以通过以下方式创建遮罩层： 1. **创建HTML结构**：同样，首先需要一...
例如，可以使用`transition`和`animation`属性实现遮罩层的平滑显示和隐藏。此外，`position`属性（如`fixed`或`absolute`）可以确保遮罩层始终位于页面的最前端，即使用户滚动页面也是如此。`z-index`属性则用来...
根据给定文件的信息，本文将...通过js+div+css的方式实现弹出层不仅简单易行，而且功能强大。开发者可以根据实际需求对弹出层进行定制化开发，提升用户体验。希望以上内容能帮助读者更好地理解和掌握弹出层的实现方法。
在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先，我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为...
- 首先需要创建一个用于显示遮罩层的`<div>`容器。 - 再创建一个用于显示弹框内容的`<div>`容器。 ```html <div class="tip"></div> <div class="collectSucc"> <div class="collectSucc_top"> </div> 抢...
在现代网页设计中，弹出层（Modal）和遮罩层（Overlay）是常见且重要的交互元素，它们用于显示重要信息、用户提示或者进行表单提交等操作。本篇文章将深入探讨如何利用jQuery和CSS3技术来创建具有动画效果的遮罩弹出...
标题中的“JQuery+DIV+CSS在本页面弹出遮罩层，如弹出的登录小窗口”涉及到了网页交互设计中的几个关键元素和技术。首先，JQuery是一种广泛使用的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果...
在给定的标题和描述中，我们看到了一个纯JavaScript（JS）和CSS实现的简单半透明遮罩弹窗的实例。这种方法避免了依赖于jQuery等大型库，使得代码更简洁且易于理解。 首先，我们需要两个`div`元素，一个用于弹窗内容...
本文档将详细介绍一个基于 JavaScript (简称JS)、DIV 和 CSS 的实现方案，该方案不仅能够支持多种类型的弹窗展示（包括 iframe 内容），还特别注重于不同浏览器间的兼容性处理。 #### 二、核心知识点详解 ##### 1....