Як автоматично закривати сповіщення за допомогою Bootstrap Twitter

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

Для зацікавлених його можна знайти тут: http://getbootstrap.com/javascript/#alerts

Моє питання в цьому; після того, як я показав попередження користувачеві, я хотів би, щоб воно просто зникло через певний проміжок часу. На основі документів twitter та коду, який я переглядав, виглядає так, що це не запечене в:

• Моє перше запитання - це запит на підтвердження того, що це справді НЕ запекло в Bootstrap
• По-друге, як я можу досягти такої поведінки?

Дзвінок 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);

Я впевнений, що є більш елегантні способи досягнення цього.

Я не міг змусити його працювати з попередженням. ('Закрити').

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

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

У мене була та сама проблема, коли я намагався обробляти спливаючі попередження та зникати. Я шукав у різних місцях і виявив, що це моє рішення. Додавання та видалення класу "in" виправило мою проблему.

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

}, 5000);

При використанні .remove () і, подібним чином, рішення .alert ('закрити'), мені здавалося, що у мене виникла проблема з видаленням попередження з документа, тому, якщо я хотів знову використовувати той самий div попередження, я не зміг. Це рішення означає, що сповіщення можна повторно використовувати без оновлення сторінки. (Я використовував aJax для надсилання форми та надання відгуку користувачеві)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

Використання дії `` закрити '' для попередження не працює для мене, оскільки воно видаляє попередження з 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);
}

Це версія coffescript:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

З кожним із наведених вище рішень я продовжував втрачати можливість повторного використання попередження. Моє рішення було таким:

Під час завантаження сторінки

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

Одного разу попередження потрібно було відобразити

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

Зверніть увагу, що fadeTo встановлює непрозорість на 0, тому дисплей був відсутній, а непрозорість дорівнювала 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);     
}

Мені потрібне було дуже просте рішення, щоб приховати щось через деякий час, і мені вдалося змусити це працювати:

У кутовому ви можете зробити це:

$timeout(self.hideError,2000);

Ось функція, яку я викликаю, коли досягнуто тайм-ауту

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

Тож тепер мій dialog / ui може використовувати ці властивості для приховування елементів.

З затримкою та згасанням:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);

спробуйте це

$(function () {

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

        }, 3000)

});