Сообщение об обновлении бутстрапа Twitter снова и снова

Ответ 1

Data-dismiss полностью удаляет элемент. Вместо этого используйте метод jQuery.hide().

Метод исправить это быстро:

Используя встроенный javascript, чтобы скрыть элемент по клику вот так:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

Однако это следует использовать только в том случае, если вы ленивы (что не очень хорошо, если вы хотите обслуживаемое приложение).

Метод "сделай это правильно":

Создайте новый атрибут данных для сокрытия элемента.

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

и затем измените data-dismiss на data-hide в разметке. Пример на jsfiddle.

$("." + $(this).attr("data-hide")).hide()

Это скроет все элементы с классом, указанным в data-hide, то есть: data-hide="alert" скроет все элементы с классом alert.

Xeon06 предоставил альтернативное решение:

$(this).closest("." + $(this).attr("data-hide")).hide()

Это будет скрывать только ближайший родительский элемент. Это очень полезно, если вы не хотите назначать каждому предупреждению уникальный класс. Обратите внимание, что, однако, вам нужно поместить кнопку закрытия в оповещении.

Определение .closest от jquery doc:

Для каждого элемента в наборе получите первый элемент, который соответствует селектору, проверив сам элемент и пройдя через его предков в дереве DOM.

Ответ 2

Я просто использовал модельную переменную, чтобы показать/скрыть диалог и удалить data-dismiss="alert"

Пример:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

работает для меня и останавливает необходимость выхода в jquery

Ответ 3

Я думаю, что хорошим подходом к этой проблеме было бы использовать тип события Bootstrap close.bs.alert, чтобы скрыть предупреждение, а не удалять его. Причина, по которой Bootstrap предоставляет этот тип события, заключается в том, что вы можете перезаписать поведение по умолчанию для удаления предупреждения из DOM.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

Ответ 4

Если вы используете библиотеку MVVM, такую ​​как knockout.js(которую я очень рекомендую), вы можете сделать это более чисто:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

Ответ 5

Итак, если вам нужно решение, которое может справиться с динамическими страницами html, поскольку вы уже включили его, вы должны использовать jQuery live, чтобы установить обработчик на всех элементах, которые сейчас и в будущем находятся в dom или удаляются.

Я использую

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

Ответ 6

Я столкнулся с этой проблемой, и проблема с просто взламыванием кнопки закрытия заключается в том, что мне по-прежнему нужен доступ к стандартным событиям бутстрапа-предупреждения-закрытия.

Моим решением было написать небольшой маленький настраиваемый плагин jquery, который вводит правильно сформированное предупреждение Bootstrap 3 (с кнопкой или без кнопки закрытия, поскольку вы нуждайтесь в ней) с минимумом суеты и позволяет легко восстановить его после закрытия коробки.

См. https://github.com/davesag/jquery-bs3Alert для использования, тестов и примеров.

Ответ 7

Я согласен с ответом, опубликованным Хенриком Карлссоном и отредактированным Мартином Прикрилом. У меня есть одно предложение, основанное на доступности. Я бы добавил .attr( "aria-hidden", "true" ) до конца, чтобы он выглядел так:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");

Ответ 8

Проблема вызвана использованием style="display:none", вы должны скрыть предупреждение с помощью Javascript или, по крайней мере, при его отображении, удалить атрибут стиля.

Ответ 9

В соответствии с другими ответами и изменением данных-увольнением скрыть данные, этот пример обрабатывает уведомление из ссылки и позволяет повторно открывать и закрывать предупреждение

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});

Ответ 10

Я пробовал все методы, и лучший способ для меня - использовать встроенные классы начальной загрузки .fade и .in

Пример:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

Примечание. В jQuery addClass ('in') для отображения предупреждения, removeClass ('in'), чтобы скрыть его.

Fun fact: Это работает для всех элементов. Не только оповещения.

Ответ 11

Вот решение, основанное на ответе Хенрика Карлссона, но с надлежащим инициированием событий (на основе источников Bootstrap):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

Ответ в основном для меня, как записка.

Ответ 12

Все вышеперечисленные решения используют внешние библиотеки, либо angular, либо jQuery, и старую версию Bootstrap. Итак, вот решение Чарльза Уайка-Смита на чистом JavaScript, примененное к Bootstrap 4. Да, Bootstrap требует jQuery для собственного модального кода и кода предупреждений, но не все пишут свой собственный код с помощью jQuery.

Вот HTML-код предупреждения:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Обратите внимание, что изначально предупреждение скрыто (style="display: none;"), и вместо стандартного data-dismiss="alert" мы использовали здесь data-hide="alert".

Вот JavaScript, чтобы показать предупреждение и переопределить кнопку закрытия:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

Если вы хотите скрыть или показать предупреждение программным myAlert.style.display = 'none'; в другом месте кода, просто выполните myAlert.style.display = 'none'; или myAlert.style.display = 'block'; ,