peihong-ph
- 浏览: 22688 次
- 性别:
- 来自: 北京
-
最新评论
html代码:
<body topmargin="0">
<div class="main">
网页主体内容，包含网页其他栏目
</div>
<!--蒙板-->
<div class="mask"></div>
<div class="opendiv" >
最上层DIV覆盖下面的全部DIV
</div>
</body>
css代码：
.main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
.mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }
.opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175px; margin-top:-125px; width:334px; height:180px; background-color: #6699FF; text-align:center; padding-top:20px;}
注：position:fixed!important;这个地方很重要
<body topmargin="0">
<div class="main">
网页主体内容，包含网页其他栏目
</div>
<!--蒙板-->
<div class="mask"></div>
<div class="opendiv" >
最上层DIV覆盖下面的全部DIV
</div>
</body>
css代码：
.main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
.mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opacity: 0.45; -moz-opacity: 0.45; -khtml-opacity: 0.45; }
.opendiv{z-index:920;position:absolute;left:50%; top:50%; margin-left:-175px; margin-top:-125px; width:334px; height:180px; background-color: #6699FF; text-align:center; padding-top:20px;}
注：position:fixed!important;这个地方很重要
分享到：
发表评论
-
spring注解+restlet
2014-08-26 13:32 652spring注解精解： http://www.douban.c ... -
Spring使用程序方式读取properties文件
2014-07-03 10:37 536Spring使用程序方式读取properties文件 在sp ... -
用javascript取当前系统时间(年、月、日等全)
2013-07-25 14:56 566var myDate = new Date(); myDate ... -
sql--查询数据库的连接数
2013-06-07 14:04 610Oracle: select * from v$sessio ... -
jQuery中设置form表单中action值的方法
2013-04-28 18:16 1156html代码： <form id="myFo ... -
java filter
2013-04-24 23:17 940一、使浏览器不缓存页面的过滤器 Java代码 impo ... -
sql count
2013-04-23 14:33 721连接该服务器的个数： SELECT count(*) FRO ... -
关闭打开页js（兼容浏览器）
2013-04-22 13:17 846<script> function closeSe ... -
sql-修改表
2013-04-11 10:19 714如需在表中添加列，请使用下列语法: ALTER TABLE t ... -
wget 爬虫
2012-11-13 13:34 1459wget 使用指南 wget是一个从网络上自动下载文件的自由工 ... -
Struts2的整理
2012-11-13 13:31 8861、任何表现层框架都是用来帮我们实现MVC model1(js ... -
dwr的使用
2012-11-11 12:38 812Dwr使用说明 1. 将dwr的ja ... -
Ajax的使用
2012-11-11 12:37 703ajax的使用步骤： 1.需要通过JavaScript创建XM ... -
JAVA数据库连接池
2012-11-09 00:02 734JAVA数据库连接池 基 ... -
事务传播特性和事务隔离级别
2012-11-08 23:48 609事务传播特性了解事务 ... -
ibatis
2012-11-08 23:45 758ibatis: ibatis中dao中的方法在使用sqlMap ... -
懒加载
2012-11-07 19:03 638get和load默认的时候都是立即检索，只有设置lazyloa ... -
HQL语句
2012-11-07 19:01 6201.实体查询 String hql = &qu ... -
类的加载和反射
2012-11-07 18:57 6711. 类的加载、连接和初始 a) 类的加载 i. 当程序主动使 ... -
部分重要SQL语句
2012-11-06 20:13 740TO_CHAR(date, 'fmt') 用于将 ...
相关推荐
在这个例子中，`position: fixed`让遮盖层相对于浏览器窗口定位，而`top`, `left`, `width` 和 `height` 设置为0和100%使得遮盖层覆盖整个屏幕。`background-color: rgba(0, 0, 0, 0.5)` 使用了RGBA颜色值，其中最后...
1. **创建遮盖层**：在页面上生成一个全屏的透明或者半透明元素，覆盖整个网页内容，从而阻止用户与页面的其他部分交互。 2. **显示和隐藏**：根据需求，可以随时显示或隐藏遮盖层，比如在开始一个长时间运行的操作...
遮盖层通常用于创建一个半透明的覆盖层，当用户点击某个元素时，遮盖层会出现在整个页面上，以突出显示特定内容或执行某种操作。下面我们将详细探讨这一技术的相关知识点。 首先，遮盖层的实现往往基于HTML结构，一...
遮盖层则是在弹出框出现时覆盖整个页面，以减少背景元素的干扰，提高用户体验。 1. **创建基础结构**：在HTML中，我们需要一个容器元素来承载弹出框的内容，以及一个遮盖层元素。通常，遮盖层是一个全屏的透明div，...
在创建遮罩层时，我们通常会为`<div>`设置一个大的固定宽度和高度，覆盖整个屏幕，并设置适当的背景颜色（通常是半透明黑色），使其看起来像一个覆盖在页面上的层。通过CSS的 `position` 属性（如 `fixed` 或 `...
当你点击“用户登录”按钮时，一个半透明的遮罩层会覆盖整个页面，使得用户只能与弹出的对话框进行交互，从而集中用户的注意力。这个效果的实现涉及到JavaScript、HTML和CSS三者的配合。 首先，HTML部分主要负责...
在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景，用户点击某一元素后，一个半透明的遮罩层会覆盖整个页面，同时一个浮动层（通常包含更多信息或功能）在屏幕中央出现。以下是对这个主题的详细解释： ...
1. **创建Div**：在HTML中创建一个Div元素，并设置其CSS样式为全屏大小，设置合适的透明度（如`opacity: 0.5`），并设置其定位为固定（`position: fixed`）以覆盖整个页面。 2. **隐藏/显示**：默认情况下，这个Div...
这种效果通常用于网站的开场动画、背景展示或者产品介绍等场景，它能够让图片以一种独特且引人注目的方式呈现，覆盖整个屏幕，从而营造出强烈的视觉冲击力。 该效果主要通过JavaScript（简称js）编程语言实现，...
当弹窗出现时，遮盖层会覆盖整个页面，这样可以避免用户在弹窗处理过程中与背景页面的交互，提高用户体验。同时，遮盖层的颜色和透明度也是可定制的，可以调整以适应不同的界面风格。 此外，ymPrompt还提供了解决...
接下来，我们创建一个div作为遮罩层，设置合适的样式使其覆盖整个页面。我们可以利用Bootstrap的`.modal-backdrop`类来快速实现这个效果： ```html <div id="loading-mask" class="modal-backdrop fade show"></div...
遮罩层通常用于突出显示特定内容，比如弹出窗口、模态框或者加载提示，通过半透明的背景覆盖整个页面，使用户聚焦于弹出的元素上。这种效果可以增强用户体验，使得信息传递更加清晰有效。 标题“非常简单,代码非常...
`使得遮罩层相对于浏览器窗口定位，`width`和`height`设置为100%使得它能够完全覆盖整个页面。`background-color`使用了RGBA颜色值，其中的`0.5`表示透明度，可以根据需求调整。 除了遮罩层，示例中还包含了一个`...
在描述中提到的“前辈的成果，显示所需要的页面，第一个页面隐藏”，可能指的是使用`div`作为初始页面，然后通过某种用户交互（如点击按钮）来显示`iframe`内容，同时`div`作为背景或者遮罩层，使得`iframe`内容成为...
1. **过渡动画**：在进行页面切换或元素动画时，可以在背景层添加这样的灰色遮罩，增加动画的平滑度和美观度。 2. **提示对话框**：当显示模态对话框时，通常会使用半透明遮罩覆盖背景内容，以突出当前操作的重要性...
初始状态下，`display: none`隐藏了灰色屏幕，当触发`grayOut`函数时（例如页面加载完成后），灰色屏幕会显示出来，使得整个页面变为灰色。 为了实现特定场景下的页面变灰，我们可以在JavaScript中控制灰色屏幕的...
无覆盖效果意味着对话框或抽屉不会完全遮挡页面背景，可能需要调整Z-index或者使用半透明背景，以使背景内容可见但弱化。这样可以保持用户对背景内容的感知，同时突出弹出窗口的重要性。 可拖拽功能则需要用到...
- **覆盖层**：定义了一个覆盖整个屏幕的半透明`div`元素，用于遮挡背景内容。 ##### CSS样式 - `position: absolute;`：绝对定位，允许弹出层相对于父元素进行精确位置调整。 - `z-index`：层叠顺序，确保弹出层...
同时，CSS还用于实现遮罩层，它覆盖在主页面上，给用户带来沉浸式的弹出菜单体验。CSS3的新特性，如媒体查询（Media Queries），可能被用来实现响应式设计，确保菜单在不同屏幕尺寸的设备上都能正常显示。 图片资源...