Cara Menutup Peringatan Secara Otomatis menggunakan Twitter Bootstrap

90

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?
Mario Zigliotto
sumber
Lihatlah di sini stackoverflow.com/questions/23101966/… itulah jawaban terbaik yang saya temukan
Andres

Jawaban:

108

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.

jessegavin
sumber
Hei jesse terima kasih! setTimeout berfungsi dan saya akan memilihnya sebagai solusi yang valid, tetapi tampaknya perilaku tersebut sebenarnya harus dimasukkan seperti yang dinyatakan TK Kocheran (dan dicatat).
Mario Zigliotto
Saya melihat kode bootstrap twitter dan tidak melihat dukungan untuk peringatan penutupan otomatis.
jessegavin
Ya - saya menunggu respon TK karena dari pesannya di sini sepertinya fungsi tutup otomatis harus ada dan tidak ada - tetapi laporan bug di github tidak merujuknya.
Mario Zigliotto
Ya, mereka tidak mengklaim dapat menutup peringatan secara otomatis, hanya untuk dapat menutupnya secara terprogram dengan plugin jQuery yang disediakan. yaitu $('#myAlert').alert('close')tidak berfungsi seperti yang diiklankan.
Naftuli Kay
Anda mungkin ingin memperpanjang jQuery dan pengiriman metode yang off objek, seperti: $('#my_fancy_alert').createAutoClosingAlert(2000). Anda hanya harus lulus $(this).remove()atau $(this).alert('close')di setTimeoutcallback.
aL3xa
99

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);
moogboy
sumber
Pasti solusi yang bagus. Peringatan memudar dengan sangat baik setelah jeda singkat. Terlihat sangat profesional.
Matt Setter
Bekerja cepat dan hebat memang.
Mohamed Anis Dahmani
1
Apakah ini harus dipanggil setiap kali peringatan ditampilkan, atau apakah berfungsi secara otomatis untuk semua peringatan dengan kelas .alert-message? Mengalami kesulitan, kelas waspada BS3 saya alert alert-danger alert-block, jadi harus saya gunakan .alert, alert-dangeratau nama kelas penuh dalam fungsi timeout?
raffian
@raffian Taruh seperti ini: $(".alert-message,.alert-danger,.alert-info")dan seterusnya. Anda harus mencari tahu apakah Anda menginginkannya di seluruh situs web Anda atau tidak. Jika Anda menginginkannya di setiap halaman, misalnya, di blade Laravel, Anda dapat menggunakan sesuatu seperti @include ('scripts-alert') atau @yield ('alert'). Anda harus mencari tahu atau mengajukan pertanyaan khusus di stackoverflow dan bukan di sini ...
Pathros
1
Cara terbaik untuk melakukannya. Harus ditandai sebagai jawaban yang benar @Mario Zigliotto karena elemen lain meluncur perlahan dan tidak langsung mengubah posisinya. Itu terlihat jauh lebih cantik dan profesional.
Torsten Barthel
4

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'); 
    });
Mark Daniel
sumber
3

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);
}
Daniele Armanasco
sumber
2

Ini adalah versi coffescript:

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

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.

biggles
sumber
0

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);     
}
isapir
sumber
0

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.

leeroya
sumber
0

Dengan penundaan dan fade:

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

coba yang ini

$(function () {

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

        }, 3000)

});
danny
sumber