JavaScript实现带遮罩的弹出层

最新推荐文章于 2023-05-12 09:49:20 发布

IvyQiao

最新推荐文章于 2023-05-12 09:49:20 发布

阅读量605

点赞数

本文链接：https://blog.csdn.net/IvyQiao/article/details/43525711

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
	body{
	background: url(bg.png) no-repeat;
	height:1000px;}
	#mask{
		background:#000;
		height:1000px;
		width:100%;
		opacity:0.55;
		filter:alpha(opacity=55);
		position:absolute;
		top:0;
		left:0;
		z-index:1000;}
	#login{
	height:470px;
	width:380px;
	position:fixed;
	top:30%;
	left:30%;
	z-index:1001;
	}
	.loginCon{
	width:470px;
	height:380px;
	background:url(login.png) no-repeat;
	position:relative;}
	#close{
	width:30px;
	height:30px;
	background:url(close.png) no-repeat;
	cursor:pointer;
	position:absolute;
	top:5px;
	right:5px;
	}
	#btnLogin{
	width:90px;
	height:30px;
	position:absolute;
	left:45%;}
</style>
<script>
//节点创建、获取、删除、页面高度获取、可视区域获取、定位
function openNew(){
//获取页面的高度和宽度
	var sHeight=document.documentElement.scrollHeight;
	var sWidth=document.documentElement.scrollWidth;
	//获得可视区域的宽度和高度
	var wHeight=document.documentElement.clientHeight;
	//alert(wHeight);
	//var wWidth=document.documentElement.clientWidth;竖向页面，页面与可视区域宽带一样。
	var oMask=document.createElement("div");
	oMask.id="mask";
	oMask.style.width=sWidth+"px";//记得单位
	oMask.style.height=sHeight+"px";
	document.body.appendChild(oMask);
	var oLogin=document.createElement("div");
	oLogin.id="login";
	oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>";//JS里每一个换行相当于执行一个新的语句
	document.body.appendChild(oLogin);//进入DOM后才能继续以下操作
	var lWidth=oLogin.offsetWidth;
	var lHeight=oLogin.offsetHeight;
	var left=(sWidth-lWidth)/2;
	var top=(wHeight-lHeight)/2;
	oLogin.style.left=left+"px";
	oLogin.style.top=top+"px";
	var oClose=document.getElementById("close");
	oMask.οnclick=oClose.οnclick=function(){//事件可以穿起来
		document.body.removeChild(oMask);//不能直接使用Id名
		document.body.removeChild(oLogin);
	}
}
window.οnlοad=function(){
	var btnLogin=document.getElementById("btnLogin");
	btnLogin.οnclick=function(){//事件名称不采用驼峰标记
		openNew();
	}
	}
</script>
</head>
<body>
<input type="button" id="btnLogin" value="登 录">
<!--<div id="mask"></div>
<div id="login">
	<div class="loginCon">
		<div id="close"></div>
	</div>
</div>-->
</body>
</html>

IvyQiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现带遮罩的弹出层

无标题文档 body{ background: url(bg.png) no-repeat; height:1000px;} #mask{ background:#000; height:1000px; width:100%; opacity:0.55; filter:alpha(opacity=55); position:absolute; top:0;
复制链接

扫一扫