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

在点击登录注册后通常要创建遮罩层,使整个屏幕只能操作登录窗口部分的内容。首先需要设置弹出框的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实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值