Я использую CSS-структуру twitter bootstrap (что является фантастическим). Для некоторых сообщений пользователям я показываю их с помощью предупреждений Javascript JS и CSS.
Для тех, кого это интересует, можно найти здесь: http://getbootstrap.com/javascript/#alerts
Моя проблема такова; после того, как я вывещу предупреждение пользователю, я бы хотел, чтобы он ушел через некоторое время. На основе твиттер-документов и кода, который я просматривал, похоже, что это не запекается в:
Вызов 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);
Использование действия "закрыть" для предупреждения не работает для меня, потому что оно удаляет предупреждение из DOM, и мне нужно предупреждение несколько раз (я отправляю данные с помощью ajax, и я показываю сообщение пользователю каждый пост). Поэтому я создал эту функцию, которая создает оповещение каждый раз, когда мне это нужно, а затем запускает таймер, чтобы закрыть созданное предупреждение. Я передаю функции id контейнера, к которому я хочу добавить предупреждение, тип предупреждения ( "успех", "опасность" и т.д.) И сообщение. Вот мой код:
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);
}
У меня была эта же проблема при попытке обработать всплывающие оповещения и угасать их. Я искал в разных местах и нашел, что это мое решение. Добавление и удаление класса 'in' исправило мою проблему.
window.setTimeout(function() { // hide alert message
$("#alert_message").removeClass('in');
}, 5000);
При использовании .remove() и аналогичного решения .alert('close') я, похоже, попал в проблему с удалением предупреждения из документа, поэтому, если бы я захотел снова использовать тот же alert div, я не смог, Это решение означает, что предупреждение повторно используется без обновления страницы. (Я использовал aJax для отправки формы и предоставления обратной связи пользователю)
$('#Some_Button_Or_Event_Here').click(function () { // Show alert message
$('#alert_message').addClass('in');
});
С каждым из вышеперечисленных решений я продолжал терять возможность повторного использования предупреждения. Мое решение было следующим:
Загрузка страницы
$("#success-alert").hide();
Как только предупреждение нужно отобразить
$("#success-alert").show();
window.setTimeout(function () {
$("#success-alert").slideUp(500, function () {
$("#success-alert").hide();
});
}, 5000);
Обратите внимание, что fadeTo задает непрозрачность 0, поэтому на дисплее ничего не было, а непрозрачность - 0, поэтому я удалился из своего решения.
Это версия coffescript:
setTimeout ->
$(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
Я реализовал библиотеку Javascript, в которой есть то, что вы просите как функцию: https://gist.github.com/1569896
С задержкой и затуханием:
setTimeout(function(){
$(".alert").each(function(index){
$(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
$(this).remove();
});
});
},2000);
Мне понадобилось очень простое решение, чтобы скрыть что-то после этого и удалось заставить это работать:
В angular вы можете сделать это:
$timeout(self.hideError,2000);
Вот функция, которую я вызываю, когда время ожидания достигнуто
self.hideError = function(){
self.HasError = false;
self.ErrorMessage = '';
};
Итак, теперь мой диалог /ui может использовать эти свойства, чтобы скрыть элементы.
Перейдя некоторые ответы здесь в другом потоке, вот что я закончил с:
Я создал функцию с именем 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("×")
)
.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);
}
Кажется, что он сломан. Я сообщил об этом в тестовом сценарии: https://github.com/twitter/bootstrap/issues/366
Вы можете просмотреть мой код здесь: http://jsdo.it/rfkrocktk/bRrV