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;
			}
			.title a{
				 display: block;
				 position: fixed;
				top:2px;
				 right: 5px;
				 z-index: 9999;
			}

HTML内容部分：

<!-- 制作登录框 -->
		 <a href="javascript:;" id="loginA">注册/登录</a>
		<!-- 登录弹框 -->
		<div class="login">
		      <div class="title">
				  用户登录 <a href="javascript:;" id="close">关闭</a>
			  </div>
			  <div class="content">
				 <p> 用户名：<input type="text" value="" /></p>
				 <p>  密码：<input type="password" value="" /></p>
				  <p> <input type="button" value="提交" /></p>
			  </div>
		</div>
		<div class="bg"></div>

js内容部分： （详细介绍）

注：红色指的是获取元素部分，绿色指的是显示登录部分，蓝色指的是隐藏部分，橙色指的是主要实现内容部分。黑色部分是注释部分。

//获取元素
            var title=document.querySelector('.title');
            var loginA=document.getElementById('loginA');
            var login=document.querySelector('.login');
            var close=document.getElementById('close');
            var bg=document.querySelector('.bg');
             // 显示登录框
            loginA.οnclick=function(){
                 login.style.display='block';
                 bg.style.display='block';
            }
            // 隐藏登录框
            close.οnclick=function(){
            login.style.display='none';
            bg.style.display='none';    
            }
            // 移动登录框,只能在title范围内移动该框
            //鼠标移动事件属性是（mousedown）
            //设定监听事件
            title.addEventListener('mousedown',function(e){
                // var x=e.pageX-login.offsetLeft;
                // var y=e.pageY-login.offsetTop;
                // console.log(x,y);
                //这样打印出来会出现一个负值，原因是没有解析上面的css中的动画
                //transform，它所减去的值是按照原来得位置计算的，解决方法为，在上面的式子中
                //再减去该框子的宽度和高度的一般，直接写值，上面先注释，正确的写法在下方；
                var x=e.pageX-(login.offsetLeft-300);
                var y=e.pageY-(login.offsetTop-150);
                // 计算鼠标移动时,登录框需要移动的距离
                //这里采用的是鼠标移入，且调用监听事件里面的函数
                document.addEventListener('mousemove',move);
                function  move(e){
                    //计算值
                    var newX=e.pageX-x;
                    var newY=e.pageY-y;
                    //因为上面给框添加了左侧，上部值，下方可以不再添加，主要原因是上方减去值，下方若不加上原减去的值，鼠标放置的位置便是在框子的右下角
                    // 非我们所想实现的位置。
                    login.style.left=newX+300+"px";
                    login.style.top=newY+150+"px";
                }
                    //清除mousemove移动事件
                document.addEventListener('mouseup',function(){
                    // 清除鼠标移入中的函数move
                    document.removeEventListener('mousemove',move);
                })
                
            })
            

主要实现效果：