通过Javascript实现点击链接出现登录框，并可以拖拽关闭的效果

目录

        第一步：老规矩了，来一个基础框架

        第二步：我们写一个超链接，并且把登录框的样式一并写好

 这个是现在的效果图，接下来我们写关闭的效果，所以就要开始写js部分代码

         第三步：之前忘记先把css样式放出来，现在放出来

        第四步：添加点击事件，一个是点击注册，登录框出现，一个是点击关闭，登录框消失

                第五步：这里我们添加上拖拽的样式，因为我们正常界面都是在页面顶部拖拽，所以我们给,title添加样式

        第一步：老规矩了，来一个基础框架

        第二步：我们写一个超链接，并且把登录框的样式一并写好

  
    
    
  
  
     
      注册/登录
     
     

           

     		  用户登录 关闭
     	  
     	  

     		 
 用户名：
     		 
  密   码：
     		  
 
     	  
     
     

  

这里的话我们写了一个a和一个div盒子，盒子里包裹了一个提示框，下方是样图

 这个是现在的效果图，接下来我们写关闭的效果，所以就要开始写js部分代码

         先把整个页面中该获取到的获取到

         第三步：之前忘记先把css样式放出来，现在放出来

		*{
				padding: 0px;
				margin: 0px;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			
			.bg{
				width: 100%;
				height: 100%;
			   position: fixed;
				top: 0px;
				left:0px;
				 background: rgb(0,0,0,.4);
				 z-index: 9998;
				 display: none;
			}
			.login{
				 width: 600px;
				 height: 300px;
				 position: fixed;
				 top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				z-index: 9999;
				background: #fff;
				display: none;
							
			}
			.title{
			height: 45px;
			 line-height: 45px;
			text-align: center;
			border-bottom: 1px solid #DCDCDC;
			position: relative;
			cursor: move; 
			}
			.content p{
				 text-align: center;
				 line-height: 45px;
				 padding-top: 10px;
			
			}
			
			.content>p>input{
				border: 1px solid black;
				border-radius: 1px;
			}
			
			.title a{
				 display: block;
				 position: fixed;
				top:2px;
				 right: 5px;
				 z-index: 9999;
			}

        第四步：添加点击事件，一个是点击注册，登录框出现，一个是点击关闭，登录框消失

                第五步：这里我们添加上拖拽的样式，因为我们正常界面都是在页面顶部拖拽，所以我们给,title添加样式

         到这里，整个样式就全部写完了，拖拽和关闭，出现的样式就写完了，接下来附上完整代码

	
		
		
		
	
	
		
		
		 注册/登录
		
		

		      

				  用户登录 关闭
			  
			  

				 
 用户名：
				 
  密   码：