最好的jQuery的/ Javascript的做法移動的東西關閉頁面

Question

我想知道最佳做法是什麼時，顯示一個不存在的div，然後在使用Jquery時刪除它。像一個模式的彈出框如燈箱或排序...

我有一個彈出式購物車在我的網頁上，它的作品排序。原來我的購物車褪色到0.但如果你這樣做，下面的HTML是不可點擊的......所以現在我已經把購物車的股權轉移到了真正的遠，並褪色了。然後，當您點擊「購物車」按鈕時，我將所有樣式重新恢復正常。我想知道是否有更清潔的方式。說只是淡化一個部分，然後禁用div，所以下面的html是可點擊的...因此，你不必移動一堆css的彈出div。

繼承人我當前的代碼：

document.getElementById("shopping-container").style.position="absolute"; 
document.getElementById("shopping-container").style.left="2000px"; 

$(".open").click(function() { 
$("#shopping-container").stop().animate({"opacity": "1"}, "fast", function(){ 
    document.getElementById("shopping-container").style.position="relative"; 
    document.getElementById("shopping-container").style.top="150px"; 
}); 
}); 

$(".close").click(function() { 
$("#shopping-container").stop().animate({"opacity": "0"}, "fast", function(){ 
    document.getElementById("shopping-container").style.position="absolute"; 
    document.getElementById("shopping-container").style.left="2000px"; 
}); 
}); 

Answer 1

，而不是移動關閉屏幕，設置的style.display = 「無」

Answer 2

最初讓您的DIV隱藏...

<div id="shopping-container" style="display:none;"> 
...... 
Your elements here 
...... 
</div> 

$(".open").click(function() { 
$("#shopping-container").stop().animate({"opacity": "1"}, "fast", function(){ 
    $("shopping-container").show(); 
}); 
}); 


$(".close").click(function() { 
$("#shopping-container").stop().animate({"opacity": "0"}, "fast", function(){ 
    $("shopping-container").hide(); 
}); 
});