Question

我已经阅读了很多关于如何在几秒钟之后隐藏对话框的答案。但是我不能用我的例子来完成这项工作。

我正在使用一个opencart插件，在您在购物车中添加产品后显示DIV但是只在用户点击“继续购物”时关闭。我希望这个DIV在5秒后自动关闭。

我已经尝试了setTimeout，延迟等等没有任何作用......所以我不确定我做错了什么：

代码是这样的：

$('#cart-total').html(json['total']); 
$('<div id="slidecart-success">'+json["confirmation"]+'</div>').
    dialog({
        autoOpen : true,
        modal: true,
        width : 480,
        resizable: false,                   
        title : cart_title,
        buttons: [{
            text: cart_checkout,
            click: function() { location = 'index.php?route=checkout/simplecheckout'; }
        },{
            text: pop_continue,
            click: function() { $(this).dialog("close"); }
        }],                 
        dialogClass: "slidecart-success",
        create:function(){
            $("#slidecart-success-confirm").bind("click", 
                function(){
                    $('#slidecart-success').dialog('close');
                }
            );
        },
        close: function(){
            $("#slidecart-success-confirm").unbind("click"); 
            $('#slidecart-success').remove();
        }
    });

有人能帮助我吗？

修改

我也在尝试没有成功：

if (json['success']) {

                $('#cart-total').html(json['total']);
// Start edit by Best-Byte //   
                $('<div id="slidecart-success">'+json["confirmation"]+'</div>').
                dialog({
                    autoOpen : true,
                    modal: true,
                    width : 480,
                    resizable: false,
                    title : cart_title,
          buttons: [{

        text: cart_checkout,
        click: function() { location = 'index.php?route=checkout/simplecheckout'; }
      },{
        text: pop_continue,
        click: function() { $(this).dialog("close"); }
      }
      ],                    
                    dialogClass: "slidecart-success",
                    create:function(){
                        setTimeout(function(){
    $("#slidecart-success-confirm").click();
}, 5000);
                        $("#slidecart-success-confirm").live("click", 
                            function(){
                                $('#slidecart-success').dialog('close');
                            }
                        );
                    },

Answer 1

我不打算取消自动关闭尝试此代码

var dialog = $("<div/>", {
    id: "slidecart-success"
    html: json.confirmation
}).dialog({
    autoOpen : true,
    modal: true,
    width : 480,
    resizable: false,                   
    title : cart_title,
    buttons: [{
        text: cart_checkout,
        click: function() { location = "index.php?route=checkout/simplecheckout"; }
    },{
        text: pop_continue,
        click: function() { $(this).dialog("close"); }
    }],                  
    dialogClass: "slidecart-success",
    open: function() { 
        setTimeout(function(){
            dialog.dialog("close");
        }, 5000);
    }, 
    close: function() {
        // its better to destroy dialog rather than remove node 
        dialog.destroy();
    }
}); 

// you can move this to outer scope 
// and it will close any opened dialog
$("#slidecart-success-confirm").on("click",function(){
    dialog && dialog.dialog("close");
});

Answer 2

这个怎么样：

$('#cart-total').html(json['total']); 
$('<div id="slidecart-success">'+json["confirmation"]+'</div>').
    dialog({ /* ... */ });

setTimeout(function(){
    $("#slidecart-success-confirm").click();
}, 5000);

这只会在5秒超时后在确认按钮上调用click事件......

修改

在使用bind的{{1}}按钮时，尝试使用 live 更改 $("#slidecart-success-confirm") 以上：

setTimeout

通过$("#slidecart-success-confirm").live("click", function(){ $('#slidecart-success').dialog('close'); } );函数，我们告诉新创建的元素（不是在DOM中构建），并使用相应的选择器来响应该事件（在我们的例子中为live）。尝试这个，如果它不起作用，我想我没有想法......

几秒钟后自动隐藏对话框

2 个答案: