Автоматическое закрытие div через n секунд или по нажатию кнопки

Question

Автоматическое закрытие div через n секунд или по нажатию кнопки

0

У меня есть приложение MVC, которое использует gridview DevExpress для отображения данных. Причина, по которой я упоминаю об этом, заключается в том, что после обновления записи я пытаюсь отобразить <div> с сообщением в ней и заставить ее либо закрыть (скрыть) через 3 секунды, либо закрыть, когда пользователь либо нажмет на нее, либо щелкнет на что-либо еще на странице. Я прочитал массу статей о SO о том, как закрывать и открывать элементы с помощью jQuery или Javascript, но у меня возникают трудности с этим.

Здесь моя скрипка, которая получает меня примерно в 3/4 пути туда.... div открывается при нажатии кнопки (имитирует часть "Обновить" сетки DevExpress), и если вы нажмете на сообщение, оно закрывается. Я не могу понять, как сделать автоматическое закрытие через 3 секунды. Я попытался использовать .delay(), например $('#msg').delay(3000).toggle(500); но кажется, что .delay() фактически останавливает все другие события пользовательского интерфейса до тех пор, пока продолжительность не закончится. Побочным эффектом этого является то, что если пользователь нажимает на любую другую часть документа, он не отвечает до тех пор, пока продолжительность задержки не закончится.... поэтому продолжительность задержки закрывает div, а затем событие "щелчок" документ загорается и отображает div (надеюсь, что имеет смысл).

Короче говоря, я пытаюсь автоматически отображать div по обратной передаче (нажатие кнопки), а затем автоматически закрывать ее через 3 секунды или закрывать ее, когда пользователь нажимает на нее, или любой другой элемент документа.

Любые советы/рекомендации приветствуются!

Robert 20 дек. 2013, в 04:12

Источник

Теги:

javascript

jquery

html

css

asp.net

2 ответа

1

Может быть так?

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

Rafael Soufraz 20 дек. 2013, в 01:02

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-12-20T00-29-00.000Z

Используйте таймер с 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);
    });
});

Демо: скрипка

Обновление: оно не будет скрываться, если вы щелкнете в любом месте страницы при отображении сообщения, поэтому попробуйте

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

Демо: скрипка

Это сработало замечательно .... Мне нужно было немного его изменить, так как элемент управления DevExpress использует функцию обратного вызова, которая немного испортила исходный код, но вы поставили меня на правильный путь, и я смог заставить его работать. Еще раз спасибо!