简单实现弹出层效果

最新推荐文章于 2022-11-15 22:19:55 发布

Small_Pang

最新推荐文章于 2022-11-15 22:19:55 发布

阅读量730

点赞数 1

文章标签：弹出层

本文链接：https://blog.csdn.net/Small_Pang/article/details/100575842

版权

1、首先需要一个触发按钮或者a标签

<body>
	<div class="login-boreder">
		<a href="javascript:;" id="btnLogin">登录</a>
	</div>
</body>

2、在js里面获取该标签的id

window.onload = function(){
			var oBtn = document.getElementById("btnLogin");
			oBtn.onclick = function(){
				openNew();
			}
		}

3、获得页面的高度和宽度

var yHeight = document.documentElement.scrollHeight;
var yWidth = document.documentElement.scrollWidth;

4、获得屏幕可视区域的高度和宽度

var kHeight = document.documentElement.clientHeight;
var kWidth = document.documentElement.clientWidth;

5、创建遮罩层

var oMask = document.createElement("div");
			oMask.id = "mask";
			oMask.style.height = yHeight+"px";
			oMask.style.width = yWidth+"px";
			document.body.appendChild(oMask);

6、创建登录界面

ar oLogin = document.createElement("div");
			oLogin.id = "login";
			oLogin.innerHTML = "<div class='loginCon'><div class='loginTop'><span class='loginSpan'>登录</span><div id='close'></div></div></div>";
			document.body.appendChild(oLogin);

7、使得登录界面居中显示

var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
	oLogin.style.left = kWidth/2 - dWidth/2 + "px";
	oLogin.style.top = kHeight/2 - dHeight/2 + "px";

8、关闭登录界面

点击关闭按钮可以关闭登录界面

点击登录界面外的遮罩层关闭登录界面

var oClose = document.getElementById("close");
			oMask.onclick = oClose.onclick = function(){
				document.body.removeChild(oLogin);
				document.body.removeChild(oMask);
			}
		}

9、完整代码

opactity：0.75为设置遮罩层的透明度

filter:alpha(opacity = 75)：为了兼容IE-8以下的IE浏览器

z-index：1000：设置遮罩层的层数

background：url() no-repeat：为了使得背景图片不重复

text-decoration: none：去掉超链接下面的下划线

document.getElementById()：获得标签的id

document.createElement()：创建一个标签

document.body.appendChild：将指定的DOM类型的节点加到document.body的末尾

document.body.removeChild：删除document.body末尾指定的DOM类型的节点

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	
		#mask {
			background-color: #000;
			opacity: 0.75;
			/*为了兼容IE-8以下的IE浏览器*/
			filter: alpha(opacity = 75);
			height: 969px;
			width: 100%;
			position:absolute;
			z-index: 1000;
			top: 0;
			left: 0;
		}
		#login {
			/*固定屏幕定位*/
			position: fixed;
			left: 30%;
			top: 30%;
			z-index: 1001;
		}
		.loginCon {
			width: 670px;
			height: 380px;
			background:white;
			position: relative;
		}
		.loginTop {
			height: 50px;
			width: 100%;
			background:red;
		}
		.loginSpan {
			height: 50px;
			line-height: 50px;
			font-size: 20px;
			font-style: bold;
			margin-left: 5px;
		}
		#close {
			width: 30px;
			height: 30px;
			/*no-repeat的功能是使得背景图片不重复*/
			background:url(./Lianjia/close.png) no-repeat;
			cursor: pointer;
			position: absolute;
			right: 7px;
			top: 7px;
		}
		a {
			text-decoration: none;
		}
		.login-boreder {
			height: 30px;
			line-height: 30px;
			text-align: center;
			margin:0 auto;
			width: 80px;
			border: 1px solid #000;
		}
	</style>
	<script type="text/javascript">
		function openNew(){
			//获取页面的高度和宽度
		var yHeight = document.documentElement.scrollHeight;
		var yWidth = document.documentElement.scrollWidth;
		//获取页面的可视区域高度和宽度
		var kHeight = document.documentElement.clientHeight;
		var kWidth = document.documentElement.clientWidth;
		//创建遮罩层
		var oMask = document.createElement("div");
			oMask.id = "mask";
			oMask.style.height = yHeight+"px";
			oMask.style.width = yWidth+"px";
			document.body.appendChild(oMask);

		//登录界面
		var oLogin = document.createElement("div");
			oLogin.id = "login";
			oLogin.innerHTML = "<div class='loginCon'><div class='loginTop'><span class='loginSpan'>登录</span><div id='close'></div></div></div>";
			document.body.appendChild(oLogin);
		//获取登录框的宽和高
		var dHeight = oLogin.offsetHeight;
		var dWidth = oLogin.offsetWidth;
			oLogin.style.left = kWidth/2 - dWidth/2 + "px";
			oLogin.style.top = kHeight/2 - dHeight/2 + "px";
		//创建关闭按钮
		var oClose = document.getElementById("close");
			oMask.onclick = oClose.onclick = function(){
				document.body.removeChild(oLogin);
				document.body.removeChild(oMask);
			}
		}
		window.onload = function(){
			var oBtn = document.getElementById("btnLogin");
			oBtn.onclick = function(){
				openNew();
			}
		}
	</script>
</head>
<body>
	<div class="login-boreder">
		<a href="javascript:;" id="btnLogin">登录</a>
	</div>
</body>
</html>

Small_Pang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单实现弹出层效果

简单实现弹出层效果1、首先需要一个触发按钮或者a标签<body> <div class="login-boreder"> <a href="javascript:;" id="btnLogin">登录</a> </div></body>2、在js里面获取该标签的idwindow.onload = funct...
复制链接

扫一扫