有弹出层时创建遮罩层并禁止屏幕滚动

news/2024/7/19 13:06:14 标签: JS, 弹出层, 遮罩层

在点击登录注册后通常要创建遮罩层,使整个屏幕只能操作登录窗口部分的内容。首先需要设置弹出框的z-index值为3,使弹出层距离用户更近。还需要创建一个div宽高占满整个屏幕,用来做遮罩层。(z-index=2)。同时设置这两个div都隐藏,当触发点击事件时再显示。

HTML代码:   

<a class="navigation1-a" οnclick="show_Win('register', 'movingbar1', event)" href="#">还没账号?现在注册</a>

下面是JS代码:

function show_Win(div_Win, tr_Title, event) {//参数1:要显示的div的id,参数2:div里的头部,可移动的地方。参数3:暂时没用。
        var js_Title = $(document.getElementById("tr_Title")); //标题
        js_Title.css("cursor", "move"); //改变光标为可移动的图案
	//获取弹出层
	var msgObj = $("#" + div_Win); //要弹出的div的id名
	msgObj.css('display', 'block'); //必须先弹出此行,否则msgObj[0].offsetHeight为0,因为"display":"none"时,offsetHeight无法取到数据;如果弹出框为table,则为'',如果为div,则为block,否则textbox长度无法充满td
	//y轴位置
	var js_Top = -parseInt(msgObj.height()) / 2 + "px";
	//x轴位置
	var js_Left = -parseInt(msgObj.width()) / 2 + "px";
	msgObj.css({
		"margin-left": js_Left,
		"margin-top": js_Top
	});
	document.getElementById('bg').style.display = 'block';//遮罩层
	document.documentElement.style.overflowY = 'hidden'; //禁止屏幕滚动
	//使弹出层可移动
	msgObj.draggable({
		handle: js_Title,
		scroll: false
	});
}

//关闭弹出层
function closeLogin() {
	var closeRegisterPageLayerButton1 = document.getElementById("register");
	var closeRegisterPageLayerButton2 = document.getElementById("Login"); //根据ID获取登录弹窗对象
	closeRegisterPageLayerButton1.style.display = "none"; //给弹窗对象设置关闭操作
	closeRegisterPageLayerButton2.style.display = "none";
	document.getElementById('bg').style.display = 'none'; //关闭遮罩层
	document.documentElement.style.overflowY = 'scroll'; //屏幕可滚动
}

注:本人为JS实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。


http://www.niftyadmin.cn/n/875712.html

相关文章

web图片加水印

在前端给图片加水印的方法有很多种&#xff1a; 法一&#xff1a;jscanvas&#xff0c;使用H5新增元素canvas&#xff08;画布&#xff09;加水印。 使用此方法&#xff0c;用户可以在页面上自定义水印内容。 代码如下&#xff1a; <body><canvas id"shuiyin…

CSS常用样式总结

1、一行文字超出的使用...展示 display: inline-block; // 转成行内块 overflow: hidden; width: 100px; // 宽度必设 word-break: keep-all; white-space: nowrap; // 一行展示 text-overflow: ellipsis; //溢出变成... 2、a标签 去掉下划线 text-decoration:none;

微信小程序自定义封装顶部导航栏

微信小程序自定义封装顶部导航栏&#xff08;自定义返回界面、动态设置标题&#xff09; 微信小程序官方的navigationBar只能设置颜色&#xff0c;字体大小&#xff0c;但是实际开发中多层页面嵌套则需要我们有返回上一级页面或者返回指定页面的功能&#xff0c;这个时候官方提…

Vue项目导出功能、带token导出Excel

在vue后台管理项目中&#xff0c;目前我常用的就两种导出方式 一种是不需要携带token的&#xff0c;直接调用后台的接口&#xff0c;携带需要传递参数就行&#xff0c;具体实现代码如下&#xff1a; 在main.js封装指令 let baseDownloadUrl http://xxxxxxx:8080 // 域名 co…

Vue a标签实现点击下载,下载图片、txt文件,不是直接打开的方式

前段时间在项目中遇到文件需要下载&#xff0c;直接拿出了之前封装的下载指令&#xff0c;在用的时候发现在下载jpg、txt文件时&#xff0c;并不会直接下载&#xff0c;而是会在浏览器中打开文件&#xff0c;即使给a标签添加了download 属性&#xff0c;也无济于事。 我先把之前…

uni-app实现列表的上拉加载,下拉刷新、回到顶部功能

在使用uni-app做app和小程序时&#xff0c;经常会遇到一些列表&#xff0c;这个时候就需要列表能够实现上拉加载更多、下拉刷新的功能&#xff0c;具体效果如下&#xff1a; 此功能比较简单&#xff0c;就不过多介绍了直上代码&#xff1a; HTML部分 // 活动列表<view c…

nodejs+nginx获取真实ip,解决获取ip为127.0.0.1的问题

nodejsnginx获取真实ip,解决获取ip为127.0.0.1的问题 访问互联网上的服务时&#xff0c;大多数时&#xff0c;客户端并不是直接访问到服务端的&#xff0c;而是客户端首先请求到反向代理&#xff0c;反向代理再转发到服务端实现服务访问&#xff0c;通过反向代理实现路由/负载…

react监听页面滚动事件:window.addEventListener的scroll无效

react监听页面滚动事件&#xff1a;window.addEventListener的scroll无效 在react项目中需要通过监听页面滚动高度&#xff0c;控制页面样式动态展示&#xff0c;所以在网上找了以后其他案例发现监听无效&#xff0c;代码如下&#xff1a; //在componentDidMount&#xff0c;…