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?
javascript
jquery
css
twitter-bootstrap
alert
Mario Zigliotto
sumber
sumber
Jawaban:
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.
sumber
$('#myAlert').alert('close')
tidak berfungsi seperti yang diiklankan.$('#my_fancy_alert').createAutoClosingAlert(2000)
. Anda hanya harus lulus$(this).remove()
atau$(this).alert('close')
disetTimeout
callback.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);
sumber
.alert-message
? Mengalami kesulitan, kelas waspada BS3 sayaalert alert-danger alert-block
, jadi harus saya gunakan.alert
,alert-danger
atau nama kelas penuh dalam fungsi timeout?$(".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 ...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'); });
sumber
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); }
sumber
Ini adalah versi coffescript:
setTimeout -> $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove())) ,5000
sumber
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.
sumber
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 opsionaltype
dancloseDealy
. Sehingga Anda dapat, misalnya, menambahkan jenis peringatandanger
(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("×") ) .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); }
sumber
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.
sumber
Dengan penundaan dan fade:
setTimeout(function(){ $(".alert").each(function(index){ $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){ $(this).remove(); }); }); },2000);
sumber
coba yang ini
$(function () { setTimeout(function () { if ($(".alert").is(":visible")){ //you may add animate.css class for fancy fadeout $(".alert").fadeOut("fast"); } }, 3000) });
sumber