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

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

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

原生js——实现网页登录框、遮罩层(弹出层)效果、原页面进行登录_第1张图片

2 . Html布局(无任何代码):

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


































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 100px 100px;
		position:fixed;
		z-index:10;
	}
	
	.login-content{
		width:100%;
		height:auto;
		position:relative;
	}

	.login-close{
		position:absolute;
		top:-55px;
		right:-90px;
		width:30px;
		height:30px;
		line-height:30px;
		text-align:center;
		cursor:pointer;
	}

	.login-head{
		width:120px;
		height:120px;
		margin:40px auto 25px auto;
		border-radius:50%;
		box-shadow:0 0 1px red;
		background-color:#fff;
		overflow:hidden;
	}

	.login-head a{
		display:block;
		width:120px;
		height:120px;
	}

	/*前面的小三角形*/
	.login-body:before{
		content:"";
		position:absolute;
		bottom:100%;
		left:50%;
		margin-left:-16px;
		border-left:16px solid transparent;
		border-right:16px solid transparent;
		border-bottom:16px solid #ccc;
	}

	.login-body{
		width:500px;
		height:auto;
		background-color:#ccc;
		position:relative;
	}

	.login-form{
		padding:50px;
	}

	.account-number,
	.account-password,
	.submit{
		width:400px;
		height:50px;
		line-height:50px;
	}

	.account-number,
	.account-password
	{
		background-color:#fff;
		border-radius:5px 5px;
		box-shadow:0 0 3px purple;
	}
	
	.account-password
	{
		margin-top:20px;
	}

	.account-number input,
	.account-password input
	{	
		width:320px;
		border:none;
		background:none;
		font-size:16px;
		font-weight:300;
		color:#666;
	}
	
	.login-options{
		width:100%;
		height:30px;
		line-height:30px;
		margin-top:15px;
	}

	.login-options .select,
	.login-options a{
		display:inline-block;
	}
	
	.login-options .select{
		float:left;
	}
	
	.login-options a{
		float:right;
	}
	
	.submit{
		margin-top:15px;
		cursor:pointer;
		box-shadow:0 0 2px blue;
	}
	
	.submit input{
		cursor:pointer;
		border:none;
		width:100%;
		height:100%;
		font-size:14px;
		font-weight:400;
		color:#fff;
		background-color:blue;
	}

	.submit input:hover{
		background-color:#999;
		transition:background-color .5s linear;
		color:green;
	}

	.glyphicon-user,
	.glyphicon-lock,
	.glyphicon-remove
	{
		padding:0 10px 0 15px;
		font-size:20px;
		top:5px;
		color:#666;
	}
	
	.glyphicon-remove{
		padding:0;
		font-size:25px;
	}

	/*遮罩层*/
	#mask{
		position:absolute;
		opacity:.75;
/*		filter:alpha(opacity=75);/*为了兼容IE*/
		z-index:5;
		background-color:#000;
	}

4. 原生js代码:


window.onload = function(){

//为以后的代码做准备(可以通过绑定登录按钮,来执行以下代码)
//	var btn = document.getElementById("");

	function use(){
		//获取浏览器的高度和宽度
		var sHeight = document.documentElement.scrollHeight;
		var sWidth = document.documentElement.scrollWidth;
		
		//获取可视区域
		var cHeight = document.documentElement.clientHeight;
		var cWidth = document.documentElement.clientWidth;

		//创建遮罩层
		var mask = document.createElement("div");
			mask.id = "mask";
			mask.style.height = sHeight + "px";
			mask.style.width = sWidth + "px";
			document.body.appendChild(mask);

		//创建登录框;
		var login = document.createElement("div");
			login.id ="login-wrap";
			login.innerHTML = "";
			document.body.appendChild(login);

		//当点击关闭按钮或者遮罩层时,关闭弹出的整个页面;
		var close = document.querySelector(".login-close");
		mask.onclick = close.onclick = function(){
			document.body.removeChild(login);
			document.body.removeChild(mask);
		}

		//获取登录框的宽高;
		var loginWidth = login.offsetWidth;
		var loginHeight = login.offsetHeight;
		
		//给登录框进行固定定位,让其永远显示在屏幕正中央;
		login.style.top = (cHeight - loginHeight) / 2 + "px";
		login.style.left = (cWidth - loginWidth) / 2 + "px";
	}

	use();//在外面调用执行函数;
	
}

注:
其实,这种技术比较简单;就是常见的window对象和document对象的一些使用;

  • 元素的获取(HTML5新增):
    1.document.querySelector();
    2.document.querySelectorAll();
    其传值方式和传统方式一致,1获取到的是一个唯一的值(比如:当一个页面中出现相同的几个类时,获取到的只是第一个),只是2获取到的是一个数组;

  • 嵌入节点组:innerHTML;

  • 添加节点:appendChild();

  • 删除节点:removeChild();

  • 可视区域的宽、高:
    document.documentElement.clientHeight;
    document.documentElement.clientWidth;

  • div元素的宽、高:
    offsetWidth;
    offsetHeight;

  • js对css属性的操作:(比较简单)

~如遇错误,欢迎指正;

  • 结束语…………………………福利时间到………………………………

    大家同为程序员,在这里给大家真诚的送上福利。

    福利链接点击这里!

你可能感兴趣的:(原生js)