`
jacklan
  • 浏览: 134146 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

显示全屏覆盖层

阅读更多

<div id="topDiv" style="filter:alpha(opacity=30);-moz-opacity:0.5; z-index:1000 ;   position: absolute;left:0px ;top:0px; BACKGROUND-COLOR: #A5C8FC ; ">
</div>

  //显示全屏覆盖层
  function showTopDiv()
  {
  		var topDiv =document.getElementById("topDiv") ;
  		topDiv.style.display="" ;
  		var winWidth=document.body.clientWidth ;
  		var winHeight=document.body.clientHeight ;
  		topDiv.style.width=winWidth ;
  		topDiv.style.height=winHeight ;
  		
  }
  //隐藏全屏覆盖层
  function hiddenTopDiv()
  {
  		var topDiv =document.getElementById("topDiv") ;
  		topDiv.style.display="none" ; 
  
  }
分享到:
评论

相关推荐

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

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

    css 半透明全屏蒙层 全屏屏蔽 内容绝对居中

    现在,你已经成功创建了一个半透明的全屏蒙层,并且内容区域被居中显示。这个效果适用于各种场景,如临时屏蔽页面、显示加载指示器或弹窗等。在实际应用中,你可以根据需要调整蒙层和内容区域的样式,如颜色、字体、...

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

    1. **HTML结构**:创建一个全屏的遮罩层通常需要用到HTML的`&lt;div&gt;`元素,通过CSS设置其`position`, `width`, `height`等属性以实现全屏覆盖。同时,还需要在遮罩层内嵌入视频播放器的容器。 2. **CSS样式**:遮罩层...

    全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮

    全屏遮罩是一种半透明的覆盖层,它覆盖整个网页,让用户知道当前页面已处于非交互状态。遮罩的颜色通常是淡灰色或黑色,具有一定的透明度,使得用户能够隐约看到页面背景,但无法直接与页面内容进行交互。这样做是...

    jquery弹出层登录和切换全屏层注册特效

    1. 全屏模式:可以使用CSS的`height:100%`和`width:100%`将注册表单填充到整个屏幕,同时利用`position:absolute`或`fixed`使其覆盖整个页面。 2. 动画过渡:jQuery的`.animate()`方法能帮助我们实现平滑的过渡效果...

    JQuery 全屏覆盖源码以及模式对话框

    全屏覆盖通常用于在网页上创建一个遮罩层,以突出显示特定内容或阻止用户与背景页面交互。实现这一功能的关键在于创建一个具有适当CSS样式的div元素,然后利用jQuery将其定位在页面的最顶层。首先,我们需要在HTML中...

    一款功能强大的Jquery弹窗插件最大化全屏显示弹出层

    全屏模式下,弹窗会填充整个浏览器窗口,但需要注意的是,全屏模式并不意味着覆盖操作系统级别的全屏,而是浏览器内的全屏显示。 此外,为了提高用户体验,弹窗插件通常会处理浏览器的resize事件,以适应窗口尺寸的...

    android 悬浮窗全屏显示,锁屏页面悬浮窗全屏显示

    在Android开发中,实现一个能够全屏显示并覆盖导航栏和状态栏的悬浮窗,以及在锁屏页面依然保持全屏显示,是一项涉及到系统权限、窗口管理服务和自定义视图的技术挑战。以下是对这个主题的详细解释: 1. **悬浮窗...

    弹出层全屏半透明(浏览器全兼容)

    标题"弹出层全屏半透明(浏览器全兼容)"揭示了我们要讨论的关键技术点:弹出层的实现、全屏覆盖以及在各种浏览器上的兼容性,特别是包括了老版本的IE6。以下是关于这些知识点的详细说明: 1. **弹出层(Pop-up ...

    jQuery弹出层登录和全屏注册表单

    4. **显示弹出层**:在jQuery函数中,使用`.show()`方法显示隐藏的div,同时可以通过`.animate()`方法添加动画效果。 5. **关闭弹出层**:为弹出层中的关闭按钮绑定`click`事件,调用`.hide()`方法将其隐藏。 接...

    超酷的全屏遮盖显示图片效果

    其次,为了实现遮盖效果,JavaScript可能会创建一个全屏的遮罩层,这个遮罩层通常使用半透明的黑色或灰色,使得图片在显示时具有一定的朦胧感,增强神秘感或艺术效果。遮罩层可以通过CSS的`position`属性设置为`...

    CSS3图片全屏显示.rar_CSS3图片全屏显示_mostlyda4

    "CSS3图片全屏显示"是一个利用CSS3特性来实现的图片展示技术,它能够让图片以全屏的方式在网页上呈现,提供给用户更加震撼和沉浸式的浏览体验。这个特效通常被应用于网站的背景、幻灯片或者产品展示等场景,旨在提高...

    ( 页面加载中(遮罩层、模拟查询、模拟隐藏、模拟刷新、全屏遮罩、兼容ie、谷歌、火狐等浏览器)2016.09.13

    "遮罩层"是一种常见的页面加载中显示的技术,它在页面内容加载期间覆盖整个页面,通常以半透明黑色背景的形式出现,以告知用户页面正在加载,同时防止用户误操作。遮罩层的设计应当简洁且不影响页面整体视觉效果,既...

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

    这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景,用户点击某一元素后,一个半透明的遮罩层会覆盖整个页面,同时一个浮动层(通常包含更多信息或功能)在屏幕中央出现。以下是对这个主题的详细解释: ...

    里面近50个常用HTML模板,包含视频全屏前景,时间日历控件,弹出窗,覆盖层,百度地图,抽奖转盘等样式,商城源码,地市高校多级联动,各种图片滑动特效等

    弹出窗常用于显示详细信息、表单填写或提示信息,而覆盖层则可以创建半透明层,使得弹出内容更为突出。这两者常常结合使用,实现模态对话框效果,涉及的技术包括JavaScript事件处理、CSS的`z-index`控制层叠顺序,...

    在手机上改进Bootstrap全屏模式的简单方法

    2. 遮罩层全屏:确保模态框背后的遮罩层(`.modal-backdrop`)也覆盖整个屏幕: ```css .modal-backdrop.modal-fullscreen { height: 100%; top: 0; left: 0; } ``` 二、JavaScript调整 1. 动态添加全屏类:在...

    遮罩层,动态的层显示

    遮罩层通常是一个半透明的覆盖层,它部分或完全隐藏页面上的其他元素,而突出显示特定内容或操作。在本案例中,"动态的层显示"指的是遮罩层不仅在页面上静态存在,还能根据用户的交互或其他事件进行动态变化,如滑动...

    全屏幻灯片

    首先,我们需要设置 body 的 `height` 和 `width` 为 `100%`,以确保全屏覆盖。然后,通过 `background-image` 属性为每张幻灯片设置背景图片。为了实现自动切换的效果,我们可以使用 `transition` 属性来定义过渡...

    基于SVG路径动画的全屏模态窗口特效

    全屏模态窗口特效意味着这个动画将覆盖整个屏幕,提供一种沉浸式的视觉效果。为了实现这一效果,开发者可能需要对HTML结构、CSS样式以及JavaScript逻辑进行精心设计。模态窗口通常包括一个遮罩层和内容区域,通过...

    实现6种炫酷的鼠标滑过图片显示遮罩层特效.zip

    - 全屏覆盖:遮罩层完全覆盖图片,显示大图或其他详细信息。 - 悬停弹出框:遮罩层内包含一个弹出框,展示额外内容。 - 动态边框:鼠标悬停时,图片边缘产生动态效果,同时显示遮罩层。 每个特效的实现都涉及到...

Global site tag (gtag.js) - Google Analytics