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

        

目录

        第一步:老规矩了,来一个基础框架

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

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

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

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

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


        第一步:老规矩了,来一个基础框架



  
    
    
  
  
     
  

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



  
    
    
  
  
     
      注册/登录
     
     
     

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

通过Javascript实现点击链接出现登录框,并可以拖拽关闭的效果_第1张图片 

 这个是现在的效果图,接下来我们写关闭的效果,所以就要开始写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添加样式


		

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

 



	
		
		
		
	
	
		
		
		 注册/登录
		
		
		

 

你可能感兴趣的