原生js——实现网页登录框、遮罩层（弹出层）效果、原页面进行登录

最新推荐文章于 2022-03-16 13:02:01 发布

男孩子小杨

最新推荐文章于 2022-03-16 13:02:01 发布

阅读量3.4k

点赞数 3

分类专栏：原生js 文章标签：登录框弹出层、阴影层 js网页遮罩层、弹出层网页遮罩层

本文链接：https://blog.csdn.net/qq_43495629/article/details/87362690

版权

这篇博客介绍了如何使用原生JavaScript创建网页登录框和遮罩层效果。点击遮罩层或关闭按钮可以移除元素。内容包括HTML布局、CSS样式和JS代码实现，涉及到querySelector、querySelectorAll等DOM操作以及节点的添加、删除和CSS属性的修改。

摘要由CSDN通过智能技术生成

原生js——实现网页登录框、遮罩层效果

1.Demo展示（单击遮罩层、或单击关闭按钮即可实现对元素的移除）：

Alt

2 . Html布局（无任何代码）：

	<body></body>     <!--应用了js把div节点动态地插入到页面中；-->

以下为：将要在js里嵌入的Html源码(通过innerHTML嵌入时，不能写成下面这种格式，双引号要改为单引号，不然浏览器解析会出现问题，详情请往下看)：

<!-- 	<div id="login-wrap"> -->
<!-- 		<div class="login-content"> -->
<!-- 			<div class="login-close"> -->
<!-- 				<span class="glyphicon glyphicon-remove"></span> -->
<!-- 			</div> -->
<!-- 			<div class="login-head"> -->
<!-- 				<a href=""><img src="img/login-pic.jpg"></a> -->
<!-- 			</div> -->
<!-- 			<div class="login-body"> -->
<!-- 				<div class="login-form"> -->
<!-- 					<form> -->
<!-- 						<div class="account-number"> -->
<!-- 							<span class="glyphicon glyphicon-user"></span> -->
<!-- 							<input type="text" value="Username" required></input> -->
<!-- 						</div> -->
<!-- 						<div class="account-password"> -->
<!-- 							<span class="glyphicon glyphicon-lock"></span> -->
<!-- 							<input type="password" value="Password" required></input> -->
<!-- 						</div> -->
<!-- 						<div class="login-options"> -->
<!-- 							<lable class="select" for="remember-me"> -->
<!-- 								<input class="" type="radio" id="remember-me">Remember&nbsp;me</input> -->
<!-- 							</lable> -->
<!-- 							<a class="forgot-password" href="#" target=""><i>Forgot&nbsp;Password?</i></a> -->
<!-- 						</div> -->
<!-- 						<div class="submit"> -->
<!-- 							<input type="submit" value="LOGIN"></input> -->
<!-- 						</div> -->
<!-- 					</form> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 		</div> -->
<!-- 	</div> -->
<!-- 	<div id="mask"></div> -->

3. css样式表（注意样式关联）：

  	*{
   
		margin:0;
		padding:0;
	}

	a{
   
		text-decoration:none;
		color:red;
	}
	
	img{
   
		width:100%;
		height:100%;
	}

	#login-wrap{
   
		background-color:#f0f0f0;
		padding:20px 100px