jquery - 将内容移出页面的最佳 Jquery/Javascript 实践

Question

我想知道显示以前不存在的 div，然后在使用 Jquery 时删除它时的最佳实践是什么。就像一个模态弹出框，如灯箱或排序...

我的页面上有一个弹出式购物车，它可以正常工作。最初我让购物车淡入淡出到 0。但是如果你这样做，下面的 html 就不可点击...所以现在我已经将购物车 div 移到了右边很远的地方并淡化了它。然后，当您单击“购物车”按钮时，我将所有样式再次重置回正常状态。我想知道是否有更清洁的方法。比如说，只是淡出一个 div，然后禁用该 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="none"