Cách tự động đóng cảnh báo bằng Twitter Bootstrap

Tôi đang sử dụng khung CSS bootstrap của twitter (thật tuyệt vời). Đối với một số thông báo cho người dùng, tôi sẽ hiển thị chúng bằng cách sử dụng cảnh báo Javascript JS và CSS.

Đối với những người quan tâm, nó có thể được tìm thấy tại đây: http://getbootstrap.com/javascript/#alerts

Vấn đề của tôi là điều này; sau khi tôi hiển thị cảnh báo cho người dùng, tôi muốn nó biến mất sau một khoảng thời gian. Dựa trên tài liệu của twitter và mã mà tôi đã xem qua, có vẻ như điều này không được đưa vào:

• Câu hỏi đầu tiên của tôi là một yêu cầu xác nhận rằng điều này thực sự KHÔNG được đưa vào Bootstrap
• Thứ hai, làm thế nào tôi có thể đạt được hành vi này?

Gọi điện window.setTimeout(function, delay)sẽ cho phép bạn thực hiện điều này. Đây là một ví dụ sẽ tự động đóng cảnh báo 2 giây (hoặc 2000 mili giây) sau khi nó được hiển thị.

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

Nếu bạn muốn gói nó trong một chức năng tiện lợi, bạn có thể làm điều này.

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

Sau đó, bạn có thể sử dụng nó như vậy ...

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

Tôi chắc chắn có nhiều cách thanh lịch hơn để thực hiện điều này.

Tôi không thể làm cho nó hoạt động với cảnh báo. ('Close').

Tuy nhiên tôi đang sử dụng cái này và nó hoạt động tốt! Cảnh báo sẽ biến mất sau 5 giây và sau khi biến mất, nội dung bên dưới cảnh báo sẽ trượt lên vị trí tự nhiên.

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

Tôi đã gặp vấn đề tương tự khi cố gắng xử lý các cảnh báo bật lên và làm mờ chúng. Tôi đã tìm kiếm khắp nơi và thấy đây là giải pháp của tôi. Thêm và xóa lớp 'trong' đã khắc phục sự cố của tôi.

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

}, 5000);

Khi sử dụng .remove () và giải pháp .alert ('close') tương tự, tôi dường như gặp sự cố với cảnh báo bị xóa khỏi tài liệu, vì vậy nếu tôi muốn sử dụng lại cùng một div cảnh báo, tôi đã không thể. Giải pháp này có nghĩa là cảnh báo có thể được sử dụng lại mà không cần làm mới trang. (Tôi đang sử dụng aJax để gửi biểu mẫu và trình bày phản hồi cho người dùng)

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

Sử dụng hành động 'đóng' đối với cảnh báo không hiệu quả với tôi, vì nó sẽ xóa cảnh báo khỏi DOM và tôi cần cảnh báo nhiều lần (Tôi đang đăng dữ liệu bằng ajax và tôi hiển thị thông báo cho người dùng trên mỗi bài đăng) . Vì vậy, tôi đã tạo chức năng này để tạo cảnh báo bất cứ khi nào tôi cần và sau đó bắt đầu hẹn giờ để đóng cảnh báo đã tạo. Tôi chuyển vào hàm id của vùng chứa mà tôi muốn thêm cảnh báo, loại cảnh báo ('thành công', 'nguy hiểm', v.v.) và thông báo. Đây là mã của tôi:

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

Đây là phiên bản coffescript:

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

Với mỗi giải pháp ở trên, tôi tiếp tục mất khả năng sử dụng lại của cảnh báo. Giải pháp của tôi như sau:

Khi tải trang

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

Khi cảnh báo cần được hiển thị

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

Lưu ý rằng fadeTo đặt độ mờ là 0, vì vậy màn hình không có và độ mờ là 0, đó là lý do tại sao tôi loại bỏ khỏi giải pháp của mình.

Sau khi xem qua một số câu trả lời ở đây trong một chuỗi khác, đây là những gì tôi đã kết thúc với:

Tôi đã tạo một hàm có tên showAlert()sẽ tự động thêm cảnh báo, với tùy chọn typevà closeDealy. Vì vậy, bạn có thể, ví dụ, thêm một loại cảnh báo danger(tức là cảnh báo nguy hiểm của Bootstrap) sẽ tự động đóng sau 5 giây như sau:

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

Để đạt được điều đó, hãy thêm hàm Javascript sau:

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

Tôi cần một giải pháp rất đơn giản để ẩn một thứ gì đó sau một thời gian và cố gắng làm cho điều này hoạt động:

Trong góc cạnh, bạn có thể làm điều này:

$timeout(self.hideError,2000);

Đây là chức năng mà tôi gọi khi hết thời gian chờ

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

Vì vậy, bây giờ hộp thoại / ui của tôi có thể sử dụng các thuộc tính đó để ẩn các phần tử.

Với sự chậm trễ và mờ dần:

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

thử cái này

$(function () {

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

        }, 3000)

});