Chic navigation made by jQuery has shadow background and highlighted modal window_jquery

WBOY

Release： 2016-05-16 16:52:24

Original

1249 people have browsed it

Rendering:
Chic navigation made by jQuery has shadow background and highlighted modal window_jquery
html link:

Copy code The code is as follows:

css:

Copy code The code is 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;} 

1: Create and call modal window

Copy code The code is as follows:

Username:

Password:

1. Create a jQuery statement and select the tracing mark with a type of pattern

Copy the code The code is as follows:

 
<script> <BR>$('document').ready(function(){ <BR><!-- Register model start--> <BR>$('a. model').click(function(){ <BR></script>

2. Use the following function to store the variables in the current project as the value of the rel attribute

Copy code The code is as follows:

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

3. Set the effect of the modal window and add the image link to Chic navigation made by jQuery has shadow background and highlighted modal window_jquery the window

Copy the code The code is as follows:

$('#' modelID).fadeIn(2000).prepend('');
$('.Chic navigation made by jQuery has shadow background and highlighted modal window_jquery_button').css({'margin-left':'535px','margin-top ':'0px'});

Two: Create a shadow background

Copy code The code is as follows :

$('#modelshade').css('opacity','0.8').fadeIn(2000);

Three: Close the modal window

Copy code The code is as follows:

 
$('a.Chic navigation made by jQuery has shadow background and highlighted modal window_jquery,#modelshade').click( function(){ 
var thismodelID= $('a.Chic navigation made by jQuery has shadow background and highlighted modal window_jquery').parent().attr('id'); 
$('#modelshade,#' thismodelID).fadeOut(function(){ 
$('a.Chic navigation made by jQuery has shadow background and highlighted modal window_jquery,#modelshade').remove(); 
}); 
return false; 
}); 

Turn off the click function If the connection fails, this method will keep the connection and try to load another page to the browser

Copy the code The code is as follows: