Как автоматически закрывать оповещения с помощью Twitter Bootstrap

90

Я использую CSS-фреймворк для начальной загрузки twitter (это фантастика). Для некоторых сообщений пользователям я показываю их с помощью предупреждений Javascript JS и CSS.

Для желающих его можно найти здесь: http://getbootstrap.com/javascript/#alerts

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

  • Мой первый вопрос - это запрос на подтверждение того, что это действительно НЕ встроено в Bootstrap.
  • Во-вторых, как я могу добиться такого поведения?
Марио Зильотто
источник
Взгляните сюда stackoverflow.com/questions/23101966/… это лучший ответ, который я нашел
Андрес

Ответы:

108

Звонок window.setTimeout(function, delay)позволит вам это сделать. Вот пример, который автоматически закроет предупреждение через 2 секунды (или 2000 миллисекунд) после его отображения.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

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

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

Тогда вы могли бы использовать это так ...

createAutoClosingAlert(".alert-message", 2000);

Я уверен, что есть более элегантные способы добиться этого.

Джессегавин
источник
Привет, Джесси, спасибо! setTimeout работает, и я выберу его как допустимое решение, но похоже, что поведение действительно должно быть запечено, как заявил (и зарегистрирован) Т.К. Кочеран.
Марио Зильотто
Я просмотрел код начальной загрузки twitter и не увидел поддержки автоматического закрытия предупреждений.
jessegavin
Да - я жду ответа ТК, потому что из его сообщения здесь похоже, что функция автоматического закрытия должна быть, а ее нет, но отчет об ошибке на github не упоминает об этом.
Марио Зильотто
Да, они не утверждают, что могут автоматически закрывать предупреждения, а только для того, чтобы программно закрывать их с помощью предоставленного плагина jQuery. т.е. $('#myAlert').alert('close')не работает как рекламируется.
Нафтули Кей
Вы можете продлить JQuery и отправки этого метода от объекта, например: $('#my_fancy_alert').createAutoClosingAlert(2000). Вам просто нужно передать $(this).remove()или $(this).alert('close')в setTimeoutобратном вызове.
aL3xa
99

Я не мог заставить его работать с предупреждением. («Закрыть») тоже.

Однако я использую это, и это работает! Предупреждение исчезнет через 5 секунд, и после исчезновения содержимое под ним переместится в свое естественное положение.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
moogboy
источник
Определенно отличное решение. После короткого интервала оповещение действительно красиво гаснет. Выглядит очень профессионально.
Мэтт Сеттер
Работает действительно быстро и отлично.
Мохамед Анис Дахмани
1
Должен ли он вызываться каждый раз, когда отображается предупреждение, или он работает автоматически для всех предупреждений с классом .alert-message? Возникают проблемы, класс на моем BS3 начеку это alert alert-danger alert-block, так что я должен использовать .alert, alert-dangerили полное имя класса в функции тайм - аута?
raffian
@raffian Скажите так: $(".alert-message,.alert-danger,.alert-info")и так далее. Вы должны выяснить, хотите ли вы этого на всем сайте или нет. Если вы хотите, чтобы это отображалось на каждой странице, например, в клинке Laravel, вы можете использовать что-то вроде @include ('scripts-alerts') или @yield ('alerts'). Вы должны выяснить или задать конкретный вопрос в stackoverflow, а не здесь ...
Патрос
1
Лучший способ сделать это. Должен быть отмечен как правильный ответ @Mario Zigliotto, поскольку другие элементы медленно поднимаются вверх и не меняют своего положения сразу. Это выглядит намного красивее и профессиональнее.
Торстен Бартель
4

У меня была такая же проблема при попытке обработать всплывающие предупреждения и их исчезновение. Я искал в разных местах и ​​нашел, что это мое решение. Добавление и удаление класса «in» устранило мою проблему.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

При использовании .remove () и аналогичного решения .alert ('close') я, похоже, столкнулся с проблемой, когда предупреждение было удалено из документа, поэтому, если бы я хотел снова использовать тот же div предупреждения, я не смог. Это решение означает, что предупреждение можно использовать повторно без обновления страницы. (Я использовал aJax для отправки формы и предоставления обратной связи пользователю)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });
Марк Дэниел
источник
3

Использование действия «закрыть» в предупреждении не работает для меня, потому что оно удаляет предупреждение из DOM, и мне нужно предупреждение несколько раз (я отправляю данные с помощью ajax и показываю сообщение пользователю в каждом сообщении) . Поэтому я создал эту функцию, которая создает предупреждение каждый раз, когда оно мне нужно, а затем запускает таймер, чтобы закрыть созданное предупреждение. Я передаю в функцию идентификатор контейнера, в который я хочу добавить предупреждение, тип предупреждения («успех», «опасность» и т. Д.) И сообщение. Вот мой код:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}
Даниэле Арманаско
источник
2

Это версия coffescript:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
Джонибой
источник
2

С каждым из вышеперечисленных решений я продолжал терять возможность повторного использования предупреждения. Мое решение было таким:

При загрузке страницы

$("#success-alert").hide();

Как только необходимо отобразить предупреждение

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

Обратите внимание, что fadeTo устанавливает непрозрачность на 0, поэтому отображение не было ни одного, а непрозрачность равнялась 0, поэтому я удалил из своего решения.

biggles
источник
0

После того, как я рассмотрел некоторые ответы здесь и в другом потоке, вот что у меня получилось:

Я создал функцию с именем, showAlert()которая будет динамически добавлять предупреждение с необязательным typeи closeDealy. Так что вы можете, например, добавить предупреждение типа danger(например, предупреждение-опасность Bootstrap), которое автоматически закроется через 5 секунд следующим образом:

showAlert("Warning message", "danger", 5000);

Для этого добавьте следующую функцию Javascript:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}
Isapir
источник
0

Мне нужно было очень простое решение, чтобы что-то скрыть через какое-то время, и мне удалось заставить его работать:

В angular вы можете сделать это:

$timeout(self.hideError,2000);

Вот функция, которую я вызываю, когда истечет время ожидания

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

Итак, теперь мой диалог / пользовательский интерфейс может использовать эти свойства для скрытия элементов.

Leeroya
источник
0

С задержкой и затуханием:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);
GigolNet Гиголашвили
источник
0

Попробуй это

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});
Дэнни
источник