Jquery implements a custom popover example

In project development, if we use javascript's built-in dialog prompt, feel not very beautiful, so we usually define your own some dialog, I realize the popup window click on the button to a login window, click on the window and can implement drag-and-drop functionality, too many things said not clear, text directly speak in code.

Here I'll post the HTML, CSS, and Jquery code separately

HTML part:

 
<button id="show" class="alter"> Popup window </button> 
<!--  Popup window part --> 
<div class="box"> 
<div class="box_content"> 
<div class="title"> 
<h3> Login to tenghu pass </h3> 
<h2 id="close"> x </h2> 
</div> 
<div class="content"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr height="60px"> 
<td colspan="2"> 
<p class="prompt" id="username_p"> Please enter a user name </p> 
<input type="text" class="inputstyle ins" id="username"/> 
</td> 
</tr> 
<tr height="60px"> 
<td colspan="2"> 
<p class="prompt" id="pwd_p"> Please enter your password </p> 
<input type="password" class="inputstyle ins" id="pwd"/> 
</td> 
</tr> 
<tr height="30px"> 
<td align="left"><input type="checkbox" checked="checked"/>  Next automatic login </td> 
<td align="right"><a href="#"> Forget your password? </a></td> 
</tr> 
<tr height="60px"> 
<td colspan="2"><input type="submit" value=" The login " class="inputstyle login" id="login"/></td> 
</tr> 
<tr height="30px"> 
<td colspan="2" align="right"><a href="#"> Register now </a></td> 
</tr> 
</table> 
</div> 
<p style="width:100%;border-bottom:1px solid #EEEEEE"></p> 
<div class="other"> 
<p> You can log in using the following methods </p> 
<ul> 
<li>QQ</li> 
<li>MSN</li> 
<li></li> 
</ul> 
</div> 
</div> 
</div> 

CSS part code:

 
<style type="text/css"> 
*{margin:0px;padding:0px;color:#555555;} 
.alter{width:50px;height:30px;margin:10px} 
.box{ 
width:100%; 
height:100%; 
position:fixed; 
top:0; 
left:0; 
background: -moz-linear-gradient(rgba(11,11,11,0.5), rgba(11,11,11,0.1)) repeat-x rgba(11,11,11,0.1); 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.1))) repeat-x rgba(11,11,11,0.1); 
z-index:100000; 
display:none; 
} 
.box_content{ 
height:420px; 
width:350px; 
background:white; 
position:fixed; 
top:0; 
left:0; 
} 
.box_content .title{ 
height:45px; 
width:100%; 
background:#EEEEEE; 
line-height:45px; 
overflow:hidden; 
} 
.title:hover{cursor: move;} 
.title h3{float:left;margin-left:20px;} 
.title h2{float:right;margin-right:15px;color:#999999} 
.title h2:hover{color:#444444;cursor:pointer} 

.box_content .content,.other{margin:20px 20px 10px 20px;overflow:hidden;font:normal 14px " Song typeface ";} 
.content table{width:99%;} 
.content .inputstyle,.prompt{height:35px;width:96.5%;padding-left:10px;} 
.content .inputstyle{font:bold 18px/35px " Song typeface ";} 
.content a{ 
text-decoration: none; 
color:#1B66C7 
} 
.content a:hover{text-decoration: underline;} 
.content table .login{ 
height:45px;width:101%; 
border:none; 
background:#4490F7; 
color:#FFFFFF; 
font:bold 17px " Song typeface "; 
border-radius:4px; 
} 
.content table .login:hover{ 
background:#559BFC; 
} 
.content .prompt{ 
color:#999999; 
position:absolute; 
line-height:38px; 
} 

.box_content .other{font:normal 14px " Song typeface ";} 
.other ul{ 
list-style:none; 
margin-top:15px; 
} 
.other ul li{ 
float:left; 
height:30px; 
width:30px; 
margin-right:15px; 
border-radius:20px; 
background:#1B66C7; 
color:white; 
text-align:center; 
line-height:30px 
} 
</style> 

Jquery code:

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
BoxInit.init(); 
}); 

var BoxInit={ 
wWidth:undefined,//Browser width
wHeight:undefined,//Browser height
show:undefined,//According to the button
box:undefined,//Popover masking property
boxContent:undefined,//Pop-up properties
closeBox:undefined,//Close button property
loginBtn:undefined,//Login button properties
init:function(){ 
var self=this; 
//Get control object
self.show=$("#show"); 
self.box=$(".box"); 
self.boxContent=$(".box_content"); 
self.closeBox=$("#close"); 
self.loginBtn=$("#login"); 
//Gets the width and height of the browser visualization
self.wWidth=$(window).width(); 
self.wHeight=$(window).height(); 
//Bind the display button click event
self.show.click(function(){self.showBtn()}); 
//Bind close button events
self.closeBox.click(function(){self.closes()}); 
//Bind login button
self.loginBtn.click(function(){self.login()}); 
//DIV drag
self.dragDrop(); 
//Invoke the control prompt message
self.controlPromptInfo(); 
}, 
 
showBtn:function(){ 
var self=this; 
self.box.animate({"width":self.wWidth,"height":self.wHeight},function(){ 
//Set the location of the popover
self.boxContent.animate({ 
"left":(self.wWidth-self.boxContent.width())/2 
},function(){ 
$(this).animate({"top":(self.wHeight-self.boxContent.height())/2}); 
}); 
}); 
}, 
 
closes:function(){ 
var self=this; 
self.boxContent.animate({ 
"top":0 
},function(){ 
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){ 
self.box.animate({"width":-self.wWidth,"height":-self.wHeight}); 
}); 
}); 
}, 
 
login:function(){ 
var self=this; 
self.boxContent.animate({ 
"top":0 
},function(){ 
$(this).animate({"left":-(self.wWidth-self.boxContent.width())/2},function(){ 
self.box.animate({"width":-self.wWidth,"height":-self.wHeight}); 
}); 

}); 
}, 
 
dragDrop:function(){ 
var self=this; 
var move=false;//Identifies whether to move the element
var offsetX=0;//Width of popover to browser left
var offsetY=0;//Pops up to the width of the browser top
var title=$(".title"); 
//Mouse down events
title.mousedown(function(){ 
move=true;//Set the move property to true when the mouse is pressed on the div
offsetX=event.offsetX;//Gets the Left value of the mouse at the relative offset of the current window and assigns the value to offsetX
offsetY=event.offsetY;//Gets the Top value of the mouse at the relative offset of the current window and assigns it to offsetY
title.css({"cursor":"move"}); 
}).mouseup(function(){ 
//Set the move property hi to false when the mouse is released
move=false; 
}); 
$(document).mousemove(function(){ 
if(!move){//If the move property is not true, the following code is not executed
return; 
} 
//When move is true, execute the following code
var x = event.clientX-offsetX; //Event.clientx gets the offset of the mouse relative to the client text area, and then subtracts offsetX to get the X value of the current drag-and-drop element relative to the current window (minus the offsetX of the current window when the mouse first started dragging)
var y = event.clientY-offsetY; //Event.clienty gets the offset of the mouse relative to the client text area, and then subtracts offsetX to get the Y value of the current drag-and-drop element relative to the current window (minus the offset Y of the current window when the mouse first started dragging)
if(!(x<0||y<0||x>(self.wWidth-self.boxContent.width())||y>(self.wHeight-self.boxContent.height()))){ 
self.boxContent.css({"left":x,"top":y,"cursor":"move"}); 
} 
}); 
}, 
 
controlPromptInfo:function(){ 
//Iterate over the prompt and click
$("p[class*=prompt]").each(function(){ 
var pro=$(this); 
pro.click(function(){ 
//Click the prompt to hide itself, the text box to get focus
pro.hide().siblings("input").focus(); 
}); 
}); 
//Iterate over the text box
$("input[class*=ins]").each(function(){ 
var input=$(this); 
//The text box loses focus
input.blur(function(){ 
//If the text field value is empty
if(input.val()==""){ 
//Display prompt message
input.siblings(".prompt").show(); 
} 
}).keyup(function(){//When the button is lifted
if(input.val()==""){//If the text field value is empty
// The text box loses focus Display prompt message
input.blur().siblings(".prompt").show(); 
}else{ 
//Prompt message hiding
input.siblings(".prompt").hide(); 
} 
}); 
}); 
} 
} 
</script> 

The code for the entire function is here