Twitter Bootstrap предупреждающее сообщение закрыть и снова открыть

Я просто использовал переменную модели, чтобы показать / скрыть диалоговое окно и удалил 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

Если вы используете библиотеку 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/

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

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

Поэтому, если вы хотите решение, которое может справиться с динамическими 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>

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

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

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

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

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

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

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

$('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 */
   });
});

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

Пример:

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

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

забавный факт: это работает для всех элементов. Не просто предупреждения.

Вот решение, основанное на ответе от Хенрика Карлссона, но с правильным запуском события (на основе источников начальной загрузки):

$(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'))
    })
});

Ответ в основном для меня, как Примечание.