`
dengminhui
  • 浏览: 168058 次
  • 来自: ...
社区版块
存档分类
最新评论

如何弹出遮罩层屏蔽页面所有操作

 
阅读更多

这次项目中需要使用在弹出窗口时使用遮罩层来屏蔽页面上其他的操作,所以参考资料写了一个可复用的:

 

		BRMMS = {},BRMMS.BackDiv = {};
		/**弹出一个底部的层遮住页面,禁止用户进行当前层外的其他操作
		 */
		BRMMS.BackDiv.popBackDiv=function(){						
			var bWidth=parseInt(document.documentElement.scrollWidth);  
 			var bHeight=parseInt(document.documentElement.scrollHeight);  
			var isIe=(document.all)?true:false;
			var back=document.createElement("div");  
 			back.id="back";  
 			var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:1;";  
 			styleStr+=(isIe)?"filter:alpha(opacity=1);":"opacity:0.01;";  
 			back.style.cssText=styleStr;  
 			document.body.appendChild(back);  
		} 
		
		/**去掉底部的层
		 */
		BRMMS.BackDiv.delBackDiv=function(){
			if(document.getElementById('back')!=null)  
 			{  
 				document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  
 			};
		}
		
		/**将底部的层设置为当前页面大小
		 */
		BRMMS.BackDiv.resizeBackDiv=function(){
			var back= document.getElementById('back');
			if(back!=null){
				back.style.width  =""+parseInt(document.documentElement.scrollWidth)+"px";
				back.style.height =""+parseInt(document.documentElement.scrollHeight)+"px";	  
 			}
		}

 

1
0
分享到:
评论

相关推荐

    js弹出遮罩层

    在网页设计中,"js弹出遮罩层"是一个常见的功能,它允许用户与特定的交互元素进行互动,而暂时屏蔽掉页面上的其他内容。这种技术可以用于显示警告信息、模态对话框、加载提示或者任何需要用户关注的特殊内容。在...

    div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作

    在网页设计和开发中,"div+css+js 实现透明屏蔽当前页面,并弹出新层进行操作" 是一种常见的交互设计技术,用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层,让用户专注于当前的任务...

    iframe子页面操作父页面并实现屏蔽页面弹出层效果

    问题:在index.html 中,iframe 引入son.html,在son.html 中如何点击某个操作,实现屏蔽整个页面,并弹出要显示的层? 准备: index.html son.html 思路: 一:index.html中iframe引入son.html , 复制代码代码...

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

    /* 保证遮罩层位于所有元素之上 */ } ``` 在JavaScript中,我们可以控制遮罩层的显示和隐藏。例如,当开始加载时显示遮罩,加载完成后再将其隐藏: ```javascript function showLoading() { document....

    JQuery弹出有遮罩的对话框

    而遮罩层(Mask)则是一个半透明的覆盖层,用于屏蔽背景页面,突出对话框,让用户专注于当前的任务。 创建一个jQuery弹出对话框的步骤如下: 1. **引入jQuery和jQuery UI库**:首先,你需要在HTML文件中引入jQuery...

    实现了弹出窗口后背景变灰并屏蔽

    通过添加一个全屏的灰色遮罩层,并在弹出窗口显示时显示它,隐藏主页面的交互性。利用CSS的`pointer-events`属性,我们可以控制元素是否响应鼠标事件。 5. **事件处理**:在对话框打开和关闭时,需要绑定相应的...

    当点击登陆按钮时可以屏蔽主页面

    这种技术的主要目的是在用户进行登录操作时提供一个更好的交互体验,通过显示一个半透明的遮罩层或者弹出窗口来暂时阻止用户与主页面的互动,直到登录过程完成。下面我们将详细探讨这一技术实现的各个方面。 首先,...

    vue解决弹出蒙层滑动穿透问题的方法

    在Vue开发中,处理弹出蒙层滑动穿透问题是一个常见的前端交互细节问题。当用户在弹出的全屏蒙层上滑动时,如果没有得到妥善处理,滑动事件会穿透蒙层,继续影响到蒙层下面的可滑动列表,导致用户体验不佳。本文通过...

    jquery遮罩,ajax时调用

    遮罩层是一种在页面上覆盖一层半透明或者特定颜色的元素,以达到屏蔽用户操作的效果。它通常用于加载大图、弹出框或者在Ajax请求期间,让用户知道当前页面正在进行后台操作,应稍作等待。 接下来,我们将探讨如何在...

    Swiper遮罩弹出菜单手机特效

    这款特效在用户点击text文本框时,会触发一个半透明的遮罩层弹出,展示一个可以上下滑动的菜单列表,让用户能够方便地进行选择操作。以下是关于这个特效涉及到的主要知识点: 1. **jQuery**:jQuery 是一个快速、...

    javascript弹出层输入框(示例代码)

    iframe元素在这里充当了遮罩层的角色,其目的同样是为了屏蔽页面其他部分的交互,同时允许用户通过点击背景层来关闭弹出层。 接下来,示例代码创建了一个`msgObj`的div元素来作为弹出层的容器,并为它设置样式,...

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

    这主要用于在页面上提供一种交互式的体验,比如显示加载动画、弹出对话框或者遮罩其他元素。下面我们将详细讲解如何使用CSS来实现这个功能。 首先,我们需要创建一个HTML结构,通常包括一个主容器(`<div>`)作为...

    屏蔽层_消息框_测试通过

    首先,我们来了解一下"屏蔽层"(也称为遮罩层或加载层)。在网页或应用程序中,屏蔽层通常用于在执行长时间操作时阻止用户与页面其他部分的互动,比如数据加载、提交表单或进行后台处理。这有助于提高用户体验,防止...

    JS弹窗带有背景颜色会渐变效果遮罩住背景

    这种效果能够提供更好的用户体验,因为渐变遮罩可以使用户更加专注于弹出的内容,同时不完全屏蔽原有的页面元素。下面将详细介绍如何实现这样的功能。 首先,我们需要在HTML文件(如`index.html`)中设置基本的结构...

    自定义对话框源码及Demo

    6. **背景灰化和屏蔽**: 当对话框弹出时,为了让用户专注于对话框内容,常会将页面背景灰化并禁止其他操作。这通常通过JavaScript或jQuery实现,例如使用`.addClass()`添加一个灰色背景的CSS类,并阻止事件冒泡以...

    AJAX多种提示窗口完美呈现

    同时,为了“屏蔽页面其它操作”,可以使用半透明遮罩层覆盖整个页面,只允许用户与提示窗口交互。 实现“多种提示窗口”可能包括不同类型的弹出框,如信息提示、警告、确认对话框等。这需要我们设计不同的UI模板,...

    微信小程序自定义弹窗实现详解(可通用)

    这里的关键类名是`zan-dialog`和`zan-dialog__mask`,它们分别对应弹窗容器和遮罩层。当`showDialog`为真时,`zan-dialog--show`类会被添加,使得弹窗可见并执行相应的动画。 ```html ;'>此处是填充的布局...

Global site tag (gtag.js) - Google Analytics