`
DAQIQIU
  • 浏览: 22785 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

背景遮罩层铺满屏

 
阅读更多
//背景
#bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100px;  height: 100px;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
var mask = document.getElementById("bg");
var b = document.documentElement?document.documentElement:document.body;
mask.style.width = b.clientWidth+"px";
mask.style.height = b.scrollHeight+"px";
$("."+clazz).css({
left:($("body").width()-$("."+clazz).width())/2-20+"px",
top:($(window).height()-$("."+clazz).height())/2+$(window).scrollTop()+"px",
display:"block"
});
分享到:
评论

相关推荐

    微信小程序全屏遮罩层代码

    在微信小程序中,全屏遮罩层是一种常见的交互设计元素,通常用于显示加载提示、弹窗确认、模态对话框等场景。它会在用户界面的顶部覆盖一层半透明或者完全不透明的背景,使得用户专注于当前操作而不会被其他元素分散...

    点击遮罩层的背景关闭遮罩层

    class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩

    qt5 遮罩背景 灰色遮罩层实现

    在Qt5中,实现一个半透明的灰色遮罩层,主要涉及到窗口管理、自定义控件和绘图技术。这个过程通常分为以下几个步骤: 1. **理解Qt窗口系统**: Qt提供了一种灵活的窗口管理系统,允许开发者创建各种复杂的用户界面...

    winform实现遮罩层效果

    在Windows Forms(Winform)开发中,遮罩层(Mask Layer)通常被用来提供一种半透明的覆盖层,用于在用户界面(UI)上显示等待、加载或提示信息,同时阻止用户与背景界面进行交互。它是一种常见的用户体验设计元素,...

    在iframe 中页面中设置遮罩遮罩层

    这里的CSS样式定义了遮罩层`.mask`,它是一个全屏的半透明黑色背景,位于所有元素之上(`z-index: 9999`)。JavaScript部分提供了`showMask`和`hideMask`两个函数,分别用于显示和隐藏遮罩层。在示例中,我们监听了...

    js打开关闭遮罩层

    在这个例子中,遮罩层的id为"mask",设置了固定定位、全屏尺寸、半透明黑色背景,以及较高的z-index以确保其覆盖在其他元素之上。 三、CSS样式控制 为了实现遮罩层的打开和关闭效果,我们可以使用CSS的`display`...

    页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮

    页面点击按钮后出现遮罩层,遮罩层上面有其他内容可显示,包含关闭遮罩层按钮。...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。

    asp.net 遮罩层 asp.net 遮罩层

    在ASP.NET中,我们经常会遇到需要实现遮罩层(Modal)的需求,以提供更好的用户体验,例如显示警告信息、加载提示或者弹出窗口等。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...

    C# 自定义半透明遮罩层

    `AllowsTransparency="True"`允许窗口背景透明,这样遮罩层就能覆盖在窗口上。 **Windows Forms实现半透明遮罩层** 在Windows Forms中,我们可以利用`Form`类的`Opacity`属性和自定义绘图来创建半透明遮罩层。以下...

    jsp页面加载之遮罩层

    1. **HTML结构**:在页面中创建一个CSS类,比如`.mask`,用于定义遮罩层的样式,例如设置背景颜色、透明度和全屏布局。 2. **CSS样式**:通过CSS控制遮罩层的显示和隐藏。通常会使用`display:none`来隐藏遮罩层,并...

    JS移动端点击弹出遮罩层

    "JS移动端点击弹出遮罩层"这一功能就是一个典型的交互设计,它允许用户通过点击按钮来显示一个覆盖整个屏幕的半透明层,通常用于加载提示、模态对话框或者阻止背景操作等场景。下面将详细介绍如何使用JavaScript来...

    漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

    动态上传文件遮罩层

    在IT行业中,动态上传文件和遮罩层是前端开发中常见的功能需求,尤其在交互体验设计上占有重要地位。本文将详细阐述“动态上传文件遮罩层”这一主题,包括其概念、实现原理以及js插件的应用。 首先,动态上传文件指...

    弹出带视频播放器全屏遮罩层

    2. **CSS样式**:遮罩层的透明度(`opacity`)和背景颜色(`background-color`)需要调整以达到半透明效果。视频播放器的定位(`position`)设置为`absolute`或`fixed`,并用`top`和`left`属性使其保持屏幕中央。 3...

    点击弹出浮动层 弹出遮罩层

    2. **遮罩层(Mask Layer)**:遮罩层是一种半透明的背景层,通常颜色较暗,用以降低页面其余部分的视觉焦点,引导用户的注意力集中在浮动层上。遮罩层的透明度可以根据设计师的需求进行调整,从完全不透明到完全...

    AlertDialog对话框 实现遮罩层

    在很多场景下,我们希望在弹出`AlertDialog`时,背景界面被一个半透明的遮罩层覆盖,以突出对话框并降低背景界面的干扰。本篇文章将深入探讨如何在Android中自定义实现`AlertDialog`的遮罩层。 首先,理解遮罩层的...

    C# WinForm遮罩层

    在C# WinForm开发中,遮罩层(通常称为Mask Layer或Overlay)是一个重要的设计元素,它用于在用户界面(UI)上显示一个半透明或全透明的覆盖层,以防止用户在特定操作进行时误操作。遮罩层通常用在加载数据、执行长...

    DIV遮罩层 div div

    遮罩层的背景色一般设为半透明,以允许用户隐约看到下方的内容,但无法进行任何交互操作。 #### 二、如何创建一个简单的DIV遮罩层? 1. **HTML结构**:首先,在HTML文档中添加一个`<div>`元素作为遮罩层的基础,...

    html的遮罩层原理

    - **背景颜色**:使用`background-color`设置遮罩层的颜色,如`rgba(0, 0, 0, 0.5)`,其中`rgba`中的最后一位是透明度,0表示完全不透明,1表示完全透明。 2. **JavaScript交互** - **显示与隐藏**:通过...

    弹出遮罩层,纯JS效果,可自定义背景

    本教程将详细讲解如何使用纯JavaScript实现一个可自定义背景、效果和定位的遮罩层。 首先,我们需要创建HTML结构。一个简单的遮罩层通常由一个全屏的透明或半透明div组成,我们可以将这个div命名为"mask"。例如: ...

Global site tag (gtag.js) - Google Analytics