Example of custom pop-up window implemented by Jquery

In project development, if we use the prompt dialog box that comes with javascript, it is not very beautiful, so we usually define some dialogs by ourselves. Here I click the button to pop up a login window, click this window to implement the drag-and-drop function. If there are too many words that cannot be clearly stated, you can directly use the code to speak.

Here I paste the HTML, CSS, and Jquery Code separately.

HTML section:
Copy codeThe Code is as follows:
<Button id = "show" class = "alter"> pop-up window </button>
<! -- Pop-up window -->
<Div class = "box">
<Div class = "box_content">
<Div class = "title">
<H3> log on to tenghu pass <H2 id = "close"> × </Div>
<Div class = "content">
<Table border = "0" cellpadding = "0" cellspacing = "0">
<Tr height = "60px">
<Td colspan = "2">
<P class = "prompt" id = "username_p"> enter the 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"> enter the 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 Logon </td>
<Td align = "right"> <a href = "#"> forgot password? </A> </td>
</Tr>
<Tr height = "60px">
<Td colspan = "2"> <input type = "submit" value = "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 on as follows </p>
<Ul>
<Li> QQ </li>
<Li> MSN </li>
<Li> </li>
</Ul>
</Div>
</Div>
</Div>

Part of the CSS code:
Copy codeThe Code is as follows:
<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 (0.1, 11 );
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 "";}
. Content table {width: 99% ;}
. Content. inputstyle,. prompt {height: 35px; width: 96.5%; padding-left: 10px ;}
. Content. inputstyle {font: bold 18px/35px "";}
. Content {
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 "";
Border-radius: 4px;
}
. Content table. login: hover {
Background: # 559BFC;
}
. Content. prompt {
Color: #999999;
Position: absolute;
Line-height: 38px;
}

. Box_content. other {font: normal 14px "";}
. 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:
Copy codeThe Code is as follows:
<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, // display button
Box: undefined, // pop-up window masking attribute
BoxContent: undefined, // pop-up window attribute
CloseBox: undefined, // close button Property
LoginBtn: undefined, // login button attribute
Init: function (){
Var self = this;
// Obtain the control object
Self. show = $ ("# show ");
Self. box = $ (". box ");
Self. boxContent = $ (". box_content ");
Self. closeBox = $ ("# close ");
Self. loginBtn = $ ("# login ");
// Obtain the visual width and height of the browser
Self. wWidth = $ (window). width ();
Self. wHeight = $ (window). height ();
// Bind the Show button click event
Self. show. click (function () {self. showBtn ()});
// Bind the close button event
Self. closeBox. click (function () {self. closes ()});
// Bind the logon button
Self. loginBtn. click (function () {self. login ()});
// DIV drag
Self. dragDrop ();
// Call control prompt information
Self. controlPromptInfo ();
},
/**
* Display button
*/
ShowBtn: function (){
Var self = this;
Self. box. animate ({"width": self. wWidth, "height": self. wHeight}, function (){
// Set the position of the pop-up window
Self. boxContent. animate ({
"Left" :( self. wWidth-self.boxContent.width ()/2
}, Function (){
$ (This). animate ({"top" :( self. wHeight-self.boxContent.height ()/2 });
});
});
},
/**
* Close button
*/
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 });
});
});
},
/**
* Logon button
*/
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 });
});

});
},
/**
* Drag a pop-up window
*/
DragDrop: function (){
Var self = this;
Var move = false; // identifies whether to move an element
Var offsetX = 0; // The width of the window to the left of the browser
Var offsetY = 0; // The width of the pop-up to the top of the browser
Var title = $ (". title ");
// Click the event
Title. mousedown (function (){
Move = true; // set the move attribute to true when the cursor is clicked on the div.
OffsetX = event. offsetX; // obtain the Left value of the cursor's relative offset in the current window and assign it to offsetX
OffsetY = event. offsetY; // gets the Top value of the cursor's relative offset in the current window and assigns it to offsetY
Title.css ({"cursor": "move "});
}). Mouseup (function (){
// When the mouse is released, set the move attribute to false.
Move = false;
});
$ (Document). mousemove (function (){
If (! Move) {// if the move attribute is not true, the following code is not executed.
Return;
}
// Execute the following code when move is true
Var x = event. clientX-offsetX; // event. clientX obtains the offset between the mouse and the client body, and then minus offsetX to obtain the X value of the current drag element relative to the current window (minus the offset X of the current window when the mouse is dragging at the beginning)
Var y = event. clientY-offsetY; // event. clientY obtains the offset between the mouse and the client body, and then minus offsetX to obtain the Y value of the current drag element relative to the current window (minus the offset Y of the current window when the mouse is dragging at the beginning)
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 "});
}
});
},
/**
* Control prompt information
*/
ControlPromptInfo: function (){
// Traverse the prompt information and click
$ ("P [class * = prompt]"). each (function (){
Var pro = $ (this );
Pro. click (function (){
// Click the prompt to hide the information. The text box gets the focus.
Pro. hide (). siblings ("input"). focus ();
});
});
// Traverse the text box
$ ("Input [class * = ins]"). each (function (){
Var input = $ (this );
// Text box loses focus
Input. blur (function (){
// If the text box value is empty
If (input. val () = ""){
// Display prompt information
Input. siblings (". prompt"). show ();
}
}). Keyup (function () {// when the key is lifted
If (input. val () = "") {// if the text box value is empty
// Message displayed when the text box loses its focus
Input. blur (). siblings (". prompt"). show ();
} Else {
// Hide the prompt information
Input. siblings (". prompt"). hide ();
}
});
});
}
}
</Script>

The code for the entire function is here