html链接:

Home >Web Front-end >JS Tutorial >Chic navigation made by jQuery has shadow background and highlighted modal window_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:52:241258browse

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');
$('.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:

return false;

});


lt;/script>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn