Question

我有一个使用DevExpress gridview显示数据的MVC应用程序。我提到这个的原因是因为在更新记录之后，我试图在其中显示一条带有消息的<div>并在3秒后关闭（隐藏），或者在用户点击它时关闭，或点击页面上的任何其他内容。我已经阅读了大量有关如何使用jQuery或Javascript关闭和打开元素的文章，但我遇到了困难。

这是我的fiddle，它让我在那里大约3/4 ......当点击按钮时div打开（模拟DevExpress网格的'Update'部分），如果你点击在消息上，它关闭。我无法弄清楚的是如何让它在3秒后自动关闭。我确实尝试使用.delay()，就像$('#msg').delay(3000).toggle(500);一样，但似乎.delay()实际上会停止所有其他UI事件，直到持续时间结束。对此的副作用是，如果用户点击文档的任何其他部分，它将不会响应，直到延迟持续时间结束....所以延迟持续时间关闭div但接着是'click'事件文件触发并显示div（希望有意义）。

简而言之，我试图在回发时自动显示div（按钮点击），然后在3秒后自动关闭它，或者在用户点击它时关闭它，或者在其中任何其他元素关闭它文档。

感谢任何建议/指导！

Answer 1

使用带有setTimeout（）

的计时器

$(document).ready(function ($) {
    $(".messageInTab").click(function () {
        $(this).hide(500);
        clearTimeout(timer)
    });

    var timer;
    $("button").click(function (e) {
        $('#msg').show(500);
        timer = setTimeout(function () {
            $('#msg').hide(500);
        }, 3000);
    });
});

演示：Fiddle

更新：如果您在显示消息时单击页面中的任何位置，则不会隐藏，因此请尝试

$(document).ready(function ($) {
    var $msg = $('#msg');
    $(document).click(function () {
        if ($msg.is(':visible')) {
            $msg.hide(500);
            clearTimeout(timer);
        }
    });

    var timer;
    $("button").click(function (e) {
        e.stopPropagation();
        if ($msg.is(':hidden')) {
            timer = setTimeout(function () {
                $('#msg').hide(500);
            }, 3000);
        }
        $msg.toggle(500);
    });
});

演示：Fiddle

Answer 2

可以吗？

        $("button").click(function(e){
          $('#msg').toggle(500);
            setTimeout(function(e){
                $("#msg").fadeOut();
            }, 2000);
        });

n秒后或按下按钮时自动关闭div

2 个答案: