css The content part ：

*{
				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%;
				/*  Place the login interface in the center of the browser  */
				transform: translate(-50%,-50%);
				z-index: 9999;
				background: #fff;
				/*  The style of the mouse inside the login interface  */
				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 The content part ：

<!--  Make a login box  -->
		 <a href="javascript:;" id="loginA"> register / Sign in </a>
		<!--  Login pop-up  -->
		<div class="login">
		      <div class="title">
				   The user login  <a href="javascript:;" id="close"> close </a>
			  </div>
			  <div class="content">
				 <p>  user name ：<input type="text" value="" /></p>
				 <p>   password ：<input type="password" value="" /></p>
				  <p> <input type="button" value=" Submit " /></p>
			  </div>
		</div>
		<div class="bg"></div>

js The content part ： （ Detailed introduction ）

notes ： Red refers to getting the element part , Green refers to the display login section , Blue refers to the hidden part , Orange refers to the main implementation content . The black part is the annotation part .

// Get elements
            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');
             // Show login box
            loginA.οnclick=function(){
                 login.style.display='block';
                 bg.style.display='block';
            }
            // Hide login box
            close.οnclick=function(){
            login.style.display='none';
            bg.style.display='none';    
            }
            // Mobile login box , Only in title Move the box within the range
            // The mouse movement event attribute is （mousedown）
            // Set listening events
            title.addEventListener('mousedown',function(e){
                // var x=e.pageX-login.offsetLeft;
                // var y=e.pageY-login.offsetTop;
                // console.log(x,y);
                // In this way, a negative value will appear when printed , The reason is that the above css In the animation
                //transform, The value it subtracts is calculated according to the original position , The solution is , In the formula above
                // Then subtract the general width and height of the frame , Write the value directly , Note above , The correct writing is below ;
                var x=e.pageX-(login.offsetLeft-300);
                var y=e.pageY-(login.offsetTop-150);
                // When calculating mouse movement , The distance the login box needs to move
                // Here, the mouse is moved in , And call the function in the listening event
                document.addEventListener('mousemove',move);
                function  move(e){
                    // Calculated value
                    var newX=e.pageX-x;
                    var newY=e.pageY-y;
                    // Because the left side of the box is added above , Upper value , You can no longer add , The main reason is that the upper minus value , If the original minus value is not added to the bottom , The position of the mouse is in the lower right corner of the frame
                    // Not where we want to achieve .
                    login.style.left=newX+300+"px";
                    login.style.top=newY+150+"px";
                }
                    // eliminate mousemove Mobile event
                document.addEventListener('mouseup',function(){
                    // Clear the functions in the mouse move move
                    document.removeEventListener('mousemove',move);
                })
                
            })
            

Main effects ：