Jquery pop-up layer registration page (Asp.net background)

[1] requirements:
1: register a non-New Page and change it to the pop-up layer,
2: Investigation on new users' desire to buy a house,
3: the user name automatically retrieves the recommended user name,
4: change the date of birth user input to control selection.
5: try your best to improve user experience and attract users to register.
[2] No picture, no truth.

1: Simplified page:

2: pop-up text tips and rounded border:

3: Support public opinion survey (asynchronous submission)

4: automatically retrieve the recommendation username (test data)

5. Data Validity Verification

6: Calendar

7: Drag and Drop supported

8: slide display

9: over

[3]CodeAnalysis
1. Create a pop-up layer,
A. First reference these three:

Copy code The Code is as follows: <SCRIPT src = "jquery-1.4.2.min.js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
<SCRIPT src = "jquery-impromptu.3.1.min.js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "examples.css"/>

B. Call this method $. Prompt to bring up the implementation.

2. surfaced text
A. reference the two first:Copy codeThe Code is as follows: <LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "jquery.tooltip.css"/>
<SCRIPT src = "jquery. tooltip. Min. js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>

B. Call the following code for implementation:
CodeCopy codeThe Code is as follows: $ ("# suggest2"). tooltip ({bodyhandler: function () {return "the user name must start with a letter" ;}, showurl: false });
$ ("# Cemail"). tooltip ({bodyhandler: function () {return "" ;}, showurl: false });
$ ("# Text1"). tooltip ({bodyhandler: function () {return "do not register minor" ;}, showurl: false });

3. Vote
A. First reference the following two:Copy codeThe Code is as follows: <SCRIPT type = "text/JavaScript" src = "jquery. rater. js"> </SCRIPT>
<LINK rel = "stylesheet" type = "text/CSS" href = "rater.css" Media = "screen"/>

B. Call $ ('# demo2'). rater ('handler1. ashx') to vote.

4. automatically retrieve the recommendation username (automatically completed)
A. First reference the following twoCopy codeThe Code is as follows: <SCRIPT src = "jquery. autocomplete. Min. js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "jquery.autocomplete.css"/>
<SCRIPT src = "localdata. js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>

B. Call $ ("# suggest2"). Focus (). AutoComplete (cities); To implement automatic retrieval (using local test data in localdata. JS)

5. Data Verification
A. First reference this <SCRIPT src = "jquery. Validate. js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
Write the following CSS:Copy codeThe Code is as follows: <style type = "text/CSS">
# Commentform {width: 500px ;}
# Commentform label {width: 500px ;}
# Commentform label. error, # commentform input. Submit {margin-left: 0px; color: red ;}
</Style>

(Commentform is the form ID)
B. Call this $ ("# commentform"). Validate () for verification. The class and some attributes in form are well configured, and all verification functions are fully automated.
For example, email <input id = "cemail" name = "email" class = "required email"/>

6. Calendar
Speaking of this! Jquery's calendar plug-in was used. Later, because it cannot be placed on the top of the bullet box, another plug-in was used.
A. First reference the twoCopy codeThe Code is as follows: <SCRIPT src = "calendar2008.js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
<LINK rel = "stylesheet" Media = "all" type = "text/CSS" href = "rightbar.css"/>

B. Write the following code.Copy codeThe Code is as follows: var c = New Calendar ("C ");
Document. Write (C );
// The following two are used for fine-tuning positioning.
C. offsettop = 22;
C. offsetleft = 25;

HTML code:Copy codeThe Code is as follows: <input class = "required dateiso" name = "begintime" type = "text" id = "text1" size = "21" onfocus = "C. showmoreday = false; C. show (this); "value =" "/>

It can be seen that his class = "required dateiso" automatically verifies the time format
7. Drag
A. Reference this first: <SCRIPT src = "jquery-ui.min.js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
B. Write $ ("XXX"). draggable (); To drag

8. Slide display:
The plugin provides extensions:

Copy code The Code is as follows: $ (document). Ready (function (){
$. FN. Extend ({
Dropin: function (speed, callback ){
VaR $ T = $ (this );
If(export t.css ("display") = "NONE "){
Eltop = shortt.css ('top ');
Elouterheight = $ T. outerheight (true );
Export t.css ({top:-elouterheight, display: 'block '})
. Animate ({top: eltop}, speed, 'swing ', callback );
}
}
});
});

Call $. Prompt ("mes", {Show: 'dropin'} to implement slide.

9. rounded border.
A. First reference this <SCRIPT src = "jquery. Corner. js" type = "text/JavaScript" Language = "JavaScript"> </SCRIPT>
B. Call $. ("XXX"). Corner ("cc: # d1c7b7 ");
C. Note: The color of the four corners is configurable, which is generally consistent with the background color.

Iv. Summary
Generally, the CSS and script naming of naming plug-ins are very standard, so conflicts are rare. As long as CSS and JS do not conflict with each other, you can use them at ease.

[5] Help (resolved)
Originally, I wanted to clear the jquery plug-in. As a result, the jquery calendar plug-in did not appear on the pop-up layer, so I changed another calendar control. I'm so angry that I set the Z-index to 10000000000000000, and the result can be imagined-it still fails. I can't find any CSS conflicts. If I find any, let me know.Copy codeThe Code is as follows: Table. jcalendar {
Border: 1px solid #000;
Background: # AAA;
Border-collapse: Separate;
Border-Spacing: 2px;
Z-index: 100000000000000000000000000000000;
Position: absolute;
}

Solution:
Method 1:
Define the following style on your page
. UI-datepicker {z-index: 1200 ;}

Use the following code when calling dialog:
Jquery ("# midialog"). Dialog ({zindex: 900 });

Method 2:

[Code]
. Datepicker ({
Beforeshow: function (I, e ){
VaR z = jquery (I). Closest (". UI-dialog" ).css ("Z-index") + 4;
E.dpdiv.css ('z-Index', Z );
}
})
Package and download code
Author: zhanglei's blog)