jquery crafted chic navigation with shaded background highlighting mode window _jquery

Effect Chart:

HTML Link:

Copy Code code as follows:

<a href= "#" rel= "Registerwindow" class= "model" > Registration </a>

Css:

Copy Code code as follows:

img{border:0px;}
#registerwindow {width:600px height:400px; top:50px right:100px; background: #FFF; display:none; border:5px #999 Solid ; Position:absolute; z-index:999;}
#modelshade {width:100%; height:100%; background: #000; display:none; position:absolute; top:0px; z-index:0;}

One: Creating and calling Schema Windows

Copy Code code as follows:

<div id= "Registerwindow" >
<H1 align= "Center" > Registration <div style= "width:250px; margin:0 auto; " >
<form>
User name: <input type= "text" name= "username" size= "><br>"
Password: <input type= "password" name= "password" size= "><br>"
<input type= "Submit" name= "submit" value= "registered" >
</form>
</div>
</div>

1. Create a jquery statement and select a notation with a pattern

Copy Code code as follows:

<script>
$ (' document '). Ready (function () {
<!--registration Model start-->
$ (' A.model '). Click (function () {

2. Use the following function to store variables in the current project as values of the Rel property

Copy Code code as follows:

var ModelID = $ (this). attr (' rel ');

3. Set the effect of the Mode window and add a picture link to close the window

Copy Code code as follows:

$ (' # ' +modelid). FadeIn. Prepend (' <a href= "#" class= "close" ></a>");
$ ('. Close_button '). css ({' Margin-left ': ' 535px ', ' margin-top ': ' 0px '});

Two: Create a shaded background

Copy Code code as follows:

$ (' #modelshade '). CSS (' opacity ', ' 0.8 '). FadeIn (2000);

Three: Close Mode window

Copy Code code as follows:

$ (' A.close, #modelshade '). Click (function () {
var thismodelid= $ (' A.close '). Parent (). attr (' id ');
$ (' #modelshade, # ' +thismodelid). fadeout (function () {
$ (' A.close, #modelshade '). Remove ();
});
return false;
});

Turn off the failed connection for the hit feature, which will remain connected and try to load another page into the browser

Copy Code code as follows:

return false;

});
<!--registration Model end-->

Lt;/script>