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] Code Analysis
1. Create a pop-up layer,
A. First reference these three:
Copy codeThe 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:
Code
Copy 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 two
Copy 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 two
Copy 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 codeThe 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)