页面上经常用到遮罩层，
1.下面用纯css写的一个兼容ie6/7/8/9/firefox/chrome/opera/safari
还有IE6给body或html加固定背景图滚动条滚动时模拟fixed的absolute层不抖动。
详细见代码：
<!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>fixed</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
_background:#151515 url(*) fixed; /*html或body加固定的背景图ie6滚动时不抖动*/
}
#overlay
{
width:100%;
height:100%;
position:fixed;
_position:absolute;
_width:expression(document.documentElement.scrollWidth);
_height:expression(document.documentElement.scrollHeight);
left:0;
top:0;
background:#999999;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
.ads
{
position:fixed;
_position:absolute;
_top:expression(eval(100 + document.documentElement.scrollTop));
top:100px;
left:0;
width:200px;
height:200px;
border:1px solid #006633;
background:#996699;
z-index:2000;
}
.content
{
height:9000px;
width:9000px;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="ads"></div>
<div class="content">
content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
</div>
</body>
</html>
2.用脚本
var relWidth;
var relHeight;
if (document.documentElement
&& document.documentElement.clientHeight) {
var doc =
document.documentElement;
relWidth = (doc.clientWidth >
doc.scrollWidth) ? doc.clientWidth - 1 : doc.scrollWidth;
relHeight =
(doc.clientHeight > doc.scrollHeight) ? doc.clientHeight :
doc.scrollHeight;
}
else {
var doc =
document.body;
relWidth = (window.innerWidth > doc.scrollWidth) ?
window.innerWidth : doc.scrollWidth;
relHeight = (window.innerHeight
> doc.scrollHeight) ? window.innerHeight : doc.scrollHeight;
}
分享到：
相关推荐
2. **设置样式**：为遮罩层设置固定宽度和高度，通常是`100%`，并设置`position`为`fixed`，使其始终覆盖整个屏幕。然后，设定`z-index`使其位于其他元素之上，确保可见。为了达到半透明效果，可以设置适当的`...
此外，`position`属性（如`fixed`或`absolute`）可以确保遮罩层始终位于页面的最前端，即使用户滚动页面也是如此。`z-index`属性则用来控制元素的堆叠顺序，确保遮罩层位于其他元素之上。 在这个案例中，卫班科技的...
- 显示与隐藏：可以使用JavaScript或者CSS的`:target`伪类来控制遮罩层的显示和隐藏，通过改变元素的`display`或`opacity`属性。 3. 整合应用： - 结合以上两者，当页面加载时，可以先展示一个由CSS3动画驱动的...
遮罩层是在页面元素上方覆盖一层半透明或全黑的背景，用于突出显示某个特定区域或阻止用户与页面其他部分的互动。在加载过程中，遮罩层可以确保用户专注于loading动画，不进行其他操作，直到页面加载完成。 实现...
综上所述，这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量，实现了优雅的图片放大查看功能，为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中，可以根据需求进行调整和优化，以...
5. **定位（Positioning）**：为了使遮罩层在页面上正确地覆盖图片，可能需要使用绝对定位（position: absolute）或者固定定位（position: fixed），并结合`top`、`right`、`bottom`和`left`属性调整位置。...
在网页设计中，遮罩层（Mask Layer）是一种常见的交互元素，用于在用户与页面其他部分互动时提供信息或引导用户的注意力。在这个“jQuery, CSS实现的遮罩层消息显示”示例中，我们将深入探讨如何利用这两种技术来...
最后，我们使用JavaScript来控制遮罩层和模态窗口的显示与隐藏。例如，当需要显示遮罩层和加载提示时，我们可以编写以下代码： ```javascript // overlay.js function showOverlay() { document.getElementById('...
以上就是一个基本的jQuery+CSS遮罩层的实现方式。这个遮罩层非常灵活，可以根据需要自定义样式和行为，比如添加动画效果、调整透明度，或者添加自定义的点击事件。在实际项目中，你还可以结合HTML结构，如弹窗、提示...
在CSS中，可以使用`position`属性（如`absolute`或`fixed`）、`z-index`来控制遮罩层的位置和层级，以及通过调整`opacity`或`background-color`实现透明度效果。 4. **CSS3 动画**： CSS3引入了`@keyframes`规则，...
在创建遮罩层时，我们通常会用到DOM操作、事件监听以及CSS样式控制。 二、遮罩层的HTML结构 首先，我们需要在HTML中创建一个遮罩层元素，通常是一个全屏的div，其初始状态通常是隐藏的。例如： ```html ; ...
遮罩层通常会阻止用户与页面其他部分的交互，直到遮罩层被关闭。在描述中提到的问题是，当页面有滚动条且内容超过视口高度时，遮罩层无法覆盖到屏幕下方的部分，这可能是由于遮罩层的高度没有正确设置或者定位方式不...
2. 使用CSS设置遮罩层的样式，使其自适应移动端屏幕。 3. 编写JavaScript代码，监听按钮点击事件，控制遮罩层的显示和隐藏。 4. 考虑移动端适配，使用`vh`和`vw`单位实现响应式布局，确保在各种屏幕尺寸下都能正常...
Lightbox是一种流行的设计模式，当用户点击图片预览链接时，会在当前页面上弹出一个全屏或半屏的图片视图，同时提供一个半透明的遮罩层，以增强用户体验。 一、CSS3半透明遮罩 半透明遮罩可以通过设置`opacity`属性...
以上就是一个基本的跨浏览器兼容的JS+CSS遮罩层实现。通过调整CSS样式和JavaScript逻辑，你可以根据实际需求定制遮罩层的外观和交互行为，例如添加动画效果、自适应屏幕尺寸等。记得在实际项目中，根据你的HTML结构...
这里的CSS样式定义了遮罩层`.mask`，它是一个全屏的半透明黑色背景，位于所有元素之上（`z-index: 9999`）。JavaScript部分提供了`showMask`和`hideMask`两个函数，分别用于显示和隐藏遮罩层。在示例中，我们监听了...
一般来说，遮罩层是一个全屏的div元素，通过CSS设置`position`为`fixed`，`top`、`left`、`right`和`bottom`均为`0`，确保它覆盖整个屏幕。另外，可以设置`z-index`属性以确保遮罩层位于页面元素之上。透明度可以...
1. `position`: 遮罩层通常设置为`fixed`或`absolute`，以便使其相对于浏览器窗口或其父元素定位。 2. `z-index`: 这个属性用于确定元素的堆叠顺序，遮罩层的`z-index`通常高于其他元素，确保它位于最上方。 3. `...
1. **创建遮罩层**：在页面中添加一个全屏的透明遮罩层，通常使用CSS来实现。可以使用`position: fixed`使遮罩层覆盖整个屏幕，`z-index`确保其位于页面其他元素之上。例如： ```css .mask { position: fixed; ...
例如，使用`.toggle()`方法控制遮罩层的显示与隐藏： ```javascript $('#show-mask-btn').click(function() { $('#mask').toggle(); }); ``` 此外，考虑到无障碍性（Accessibility），确保遮罩层能够被键盘导航和...