jQuery製作的別緻導航有陰影背景高亮模式視窗_jquery

效果圖：
 
html連結：

複製程式碼

複製程式碼

複製程式碼

複製程式碼複製程式碼

複製碼
註冊

css:

複製程式碼 程式碼如下:

img{ border:0px;}
#registerwindow{ width:600px; height;}
#registerwindow{ width:600px; height:400px; 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.建立一個jQuery語句，選擇具有一類模式的描記標記

複製程式碼 程式碼如下:

<script> <BR>$('document'). (){ <BR><!-- 註冊model start--> </script>

$('a.model').click(function(){

2.使用下面的函數，將當前項目中的變量存儲為rel屬性的值複製代碼

代碼如下:


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

3.設定模式視窗的效果，並加入關閉視窗的圖片連結

複製程式碼

程式碼如下:

$('#' modelID).fadeIn(2000).prepend('');

$('.jQuery製作的別緻導航有陰影背景高亮模式視窗_jquery_button' ).css({'margin-left':'535px','margin-top':'0px'});

二：建立陰影背景 複製程式碼

程式碼如下:


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


三：關閉模式視窗

複製程式碼

程式碼如下: $('a.jQuery製作的別緻導航有陰影背景高亮模式視窗_jquery,#modelshade').click(function(){ var thismodelID= $('a.jQuery製作的別緻導航有陰影背景高亮模式視窗_jquery').parent().attr('id'); $('#modelshade,#' thismodelID).fadeOut(function(){

$('a.jQuery製作的別緻導航有陰影背景高亮模式視窗_jquery,#modelshade').remove();

});
return false;
});


關閉點擊功能的失敗連接，該方法將保持連接並嘗試載入另一個頁面到瀏覽器

複製程式碼 程式碼如下: return false; }); lt;/script>