Cara Menutup Peringatan Secara Otomatis menggunakan Twitter Bootstrap

Saya menggunakan kerangka CSS bootstrap Twitter (yang luar biasa). Untuk beberapa pesan kepada pengguna, saya menampilkannya menggunakan lansiran Javascript JS dan CSS.

Bagi yang tertarik, dapat ditemukan di sini: http://getbootstrap.com/javascript/#alerts

Masalah saya adalah ini; setelah saya menampilkan peringatan kepada pengguna, saya ingin peringatan itu menghilang setelah beberapa waktu. Berdasarkan dokumen twitter dan kode yang telah saya lihat sepertinya ini tidak ada di:

• Pertanyaan pertama saya adalah permintaan konfirmasi bahwa ini memang TIDAK dimasukkan ke dalam Bootstrap
• Kedua, bagaimana saya bisa mencapai perilaku ini?

Menelepon window.setTimeout(function, delay)akan memungkinkan Anda mencapai ini. Berikut adalah contoh yang secara otomatis akan menutup peringatan 2 detik (atau 2000 milidetik) setelah ditampilkan.

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

Jika Anda ingin membungkusnya dalam fungsi yang bagus, Anda dapat melakukan ini.

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

Maka Anda bisa menggunakannya seperti ini ...

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

Saya yakin ada cara yang lebih elegan untuk mencapai ini.

Saya tidak bisa membuatnya bekerja dengan waspada. ('Tutup') juga.

Namun saya menggunakan ini dan itu berhasil! Lansiran akan menghilang setelah 5 detik, dan setelah hilang, konten di bawahnya akan bergeser ke posisi aslinya.

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

Saya mengalami masalah yang sama saat mencoba menangani peringatan yang muncul dan memudarkannya. Saya mencari di berbagai tempat dan menemukan ini menjadi solusi saya. Menambahkan dan menghapus kelas 'dalam' memperbaiki masalah saya.

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

}, 5000);

Saat menggunakan .remove () dan juga solusi .alert ('close') saya sepertinya mengalami masalah dengan peringatan yang dihapus dari dokumen, jadi jika saya ingin menggunakan div peringatan yang sama lagi, saya tidak dapat melakukannya. Solusi ini berarti peringatan dapat digunakan kembali tanpa menyegarkan halaman. (Saya menggunakan aJax untuk mengirimkan formulir dan memberikan umpan balik kepada pengguna)

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

Menggunakan tindakan 'tutup' pada peringatan tidak bekerja untuk saya, karena menghapus peringatan dari DOM dan saya memerlukan peringatan beberapa kali (Saya memposting data dengan ajax dan saya menunjukkan pesan kepada pengguna di setiap posting) . Jadi saya membuat fungsi ini yang membuat peringatan setiap kali saya membutuhkannya dan kemudian memulai pengatur waktu untuk menutup peringatan yang dibuat. Saya meneruskan ke fungsi id wadah yang ingin saya tambahkan peringatan, jenis peringatan ('sukses', 'bahaya', dll.) Dan pesan. Ini kode saya:

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

Ini adalah versi coffescript:

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

Dengan setiap solusi di atas, saya terus kehilangan kegunaan kembali peringatan. Solusi saya adalah sebagai berikut:

Saat memuat halaman

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

Setelah peringatan perlu ditampilkan

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

Perhatikan bahwa fadeTo mengatur opacity menjadi 0, jadi tampilan tidak ada dan opacity 0 itulah sebabnya saya menghapus dari solusi saya.

Setelah membahas beberapa jawaban di sini dan di utas lain, inilah yang saya dapatkan:

Saya membuat fungsi bernama showAlert()yang secara dinamis akan menambahkan peringatan, dengan opsional typedan closeDealy. Sehingga Anda dapat, misalnya, menambahkan jenis peringatan danger(yaitu, peringatan-bahaya Bootstrap) yang akan menutup secara otomatis setelah 5 detik seperti:

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

Untuk mencapai itu, tambahkan fungsi Javascript berikut:

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

Saya membutuhkan solusi yang sangat sederhana untuk menyembunyikan sesuatu setelah beberapa saat dan berhasil membuatnya berfungsi:

Secara sudut Anda dapat melakukan ini:

$timeout(self.hideError,2000);

Berikut adalah fungsi yang saya panggil ketika batas waktu telah tercapai

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

Jadi sekarang dialog / ui saya dapat menggunakan properti tersebut untuk menyembunyikan elemen.

Dengan penundaan dan fade:

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

coba yang ini

$(function () {

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

        }, 3000)

});