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”

，而不是移出屏幕外

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();
 });
});

用于移动页面外的最佳Jquery / Javascript实践

2 个答案: