Я использую CSS-фреймворк для начальной загрузки twitter (это фантастика). Для некоторых сообщений пользователям я показываю их с помощью предупреждений Javascript JS и CSS.
Для желающих его можно найти здесь: http://getbootstrap.com/javascript/#alerts
Моя проблема в следующем; после того, как я отобразил предупреждение пользователю, я бы хотел, чтобы оно исчезло через некоторый промежуток времени. Судя по документации твиттера и просмотренному мной коду, похоже, что это не запечено:
- Мой первый вопрос - это запрос на подтверждение того, что это действительно НЕ встроено в Bootstrap.
- Во-вторых, как я могу добиться такого поведения?
javascript
jquery
css
twitter-bootstrap
alert
Марио Зильотто
источник
источник
Ответы:
Звонок
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);
Я уверен, что есть более элегантные способы добиться этого.
источник
$('#myAlert').alert('close')
не работает как рекламируется.$('#my_fancy_alert').createAutoClosingAlert(2000)
. Вам просто нужно передать$(this).remove()
или$(this).alert('close')
вsetTimeout
обратном вызове.Я не мог заставить его работать с предупреждением. («Закрыть») тоже.
Однако я использую это, и это работает! Предупреждение исчезнет через 5 секунд, и после исчезновения содержимое под ним переместится в свое естественное положение.
window.setTimeout(function() { $(".alert-message").fadeTo(500, 0).slideUp(500, function(){ $(this).remove(); }); }, 5000);
источник
.alert-message
? Возникают проблемы, класс на моем BS3 начеку этоalert alert-danger alert-block
, так что я должен использовать.alert
,alert-danger
или полное имя класса в функции тайм - аута?$(".alert-message,.alert-danger,.alert-info")
и так далее. Вы должны выяснить, хотите ли вы этого на всем сайте или нет. Если вы хотите, чтобы это отображалось на каждой странице, например, в клинке Laravel, вы можете использовать что-то вроде @include ('scripts-alerts') или @yield ('alerts'). Вы должны выяснить или задать конкретный вопрос в stackoverflow, а не здесь ...У меня была такая же проблема при попытке обработать всплывающие предупреждения и их исчезновение. Я искал в разных местах и нашел, что это мое решение. Добавление и удаление класса «in» устранило мою проблему.
window.setTimeout(function() { // hide alert message $("#alert_message").removeClass('in'); }, 5000);
При использовании .remove () и аналогичного решения .alert ('close') я, похоже, столкнулся с проблемой, когда предупреждение было удалено из документа, поэтому, если бы я хотел снова использовать тот же div предупреждения, я не смог. Это решение означает, что предупреждение можно использовать повторно без обновления страницы. (Я использовал aJax для отправки формы и предоставления обратной связи пользователю)
$('#Some_Button_Or_Event_Here').click(function () { // Show alert message $('#alert_message').addClass('in'); });
источник
Использование действия «закрыть» в предупреждении не работает для меня, потому что оно удаляет предупреждение из DOM, и мне нужно предупреждение несколько раз (я отправляю данные с помощью ajax и показываю сообщение пользователю в каждом сообщении) . Поэтому я создал эту функцию, которая создает предупреждение каждый раз, когда оно мне нужно, а затем запускает таймер, чтобы закрыть созданное предупреждение. Я передаю в функцию идентификатор контейнера, в который я хочу добавить предупреждение, тип предупреждения («успех», «опасность» и т. Д.) И сообщение. Вот мой код:
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); }
источник
Это версия coffescript:
setTimeout -> $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove())) ,5000
источник
С каждым из вышеперечисленных решений я продолжал терять возможность повторного использования предупреждения. Мое решение было таким:
При загрузке страницы
$("#success-alert").hide();
Как только необходимо отобразить предупреждение
$("#success-alert").show(); window.setTimeout(function () { $("#success-alert").slideUp(500, function () { $("#success-alert").hide(); }); }, 5000);
Обратите внимание, что fadeTo устанавливает непрозрачность на 0, поэтому отображение не было ни одного, а непрозрачность равнялась 0, поэтому я удалил из своего решения.
источник
После того, как я рассмотрел некоторые ответы здесь и в другом потоке, вот что у меня получилось:
Я создал функцию с именем,
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); }
источник
Мне нужно было очень простое решение, чтобы что-то скрыть через какое-то время, и мне удалось заставить его работать:
В angular вы можете сделать это:
$timeout(self.hideError,2000);
Вот функция, которую я вызываю, когда истечет время ожидания
self.hideError = function(){ self.HasError = false; self.ErrorMessage = ''; };
Итак, теперь мой диалог / пользовательский интерфейс может использовать эти свойства для скрытия элементов.
источник
С задержкой и затуханием:
setTimeout(function(){ $(".alert").each(function(index){ $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){ $(this).remove(); }); }); },2000);
источник
Попробуй это
$(function () { setTimeout(function () { if ($(".alert").is(":visible")){ //you may add animate.css class for fancy fadeout $(".alert").fadeOut("fast"); } }, 3000) });
источник