Data-dismiss полностью удаляет элемент. Вместо этого используйте метод jQuery .hide ().
Метод быстрого исправления:
Используя встроенный javascript, чтобы скрыть элемент onclick следующим образом:
<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"
скроет все элементы с классом предупреждения.
Xeon06 предоставил альтернативное решение:
$(this).closest("." + $(this).attr("data-hide")).hide()
Это скроет только ближайший родительский элемент. Это очень полезно, если вы не хотите присваивать каждому оповещению уникальный класс. Обратите внимание, что, однако, вам необходимо разместить кнопку закрытия внутри предупреждения.
Определение .closest из jquery doc :
Для каждого элемента в наборе получите первый элемент, соответствующий селектору, путем тестирования самого элемента и обхода его предков в дереве DOM.
alert
) На странице. Решением для этого было бы заменить содержимое обратного вызова этой строкой$(this).closest("." + $(this).attr("data-hide")).hide();
, которая повлияет только на ближайший родительский элемент, поскольку кнопка отклонения обычно помещается в оповещение, на которое она влияет.Я просто использовал переменную модели, чтобы показать / скрыть диалог, и удалил
data-dismiss="alert"
Пример:
работает для меня и избавляет от необходимости выходить на jquery
источник
Я думаю, что хорошим подходом к этой проблеме было бы использование типа
close.bs.alert
события Bootstrap, чтобы скрыть предупреждение вместо его удаления. Причина, по которой Bootstrap предоставляет этот тип события, заключается в том, что вы можете перезаписать поведение по умолчанию при удалении предупреждения из DOM.источник
Если вы используете библиотеку MVVM, такую как knockout.js (что я настоятельно рекомендую), вы можете сделать это более аккуратно:
http://jsfiddle.net/bce9gsav/5/
источник
data-bind="click:function(){showAlert(false);}
является прекрасным примером навязчивого javascript, который далеко не чище . Я настоятельно рекомендую НЕ следовать этому подходуdata-bind
атрибут stackoverflow.com/questions/13451414/unobtrusive-knockoutПоэтому, если вам нужно решение, которое может справиться с динамическими html-страницами, поскольку вы уже включили его, вам следует использовать jQuery live, чтобы установить обработчик для всех элементов, которые сейчас и в будущем находятся в dom или будут удалены.
я использую
источник
Это сработало для меня лучше всего:
источник
Я тоже столкнулся с этой проблемой, и проблема с простым взломом кнопки закрытия заключается в том, что мне все еще нужен доступ к стандартным событиям закрытия при начальной загрузке.
Мое решение заключалось в том, чтобы написать небольшой настраиваемый плагин jquery. который вводит правильно сформированное предупреждение Bootstrap 3 (с кнопкой закрытия или без нее, если она вам нужна) с минимумом хлопот и позволяет легко регенерировать его после закрытия коробки.
См. Https://github.com/davesag/jquery-bs3Alert для использования, тестов и примеров.
источник
Я согласен с ответом, опубликованным Хенриком Карлссоном и отредактированным Мартином Прикрылом. У меня есть одно предложение, основанное на доступности. Я бы добавил .attr ("aria-hidden", "true") в его конец, чтобы он выглядел так:
источник
Все вышеперечисленные решения используют внешние библиотеки, angular или jQuery, а также старую версию Bootstrap. Итак, вот решение Чарльза Вайка-Смита на чистом JavaScript , примененное к Bootstrap 4 . Да, Bootstrap требует jQuery для своего модального кода и кода предупреждений, но не все больше пишут свой собственный код с помощью jQuery.
Вот HTML-код предупреждения:
Обратите внимание, что изначально предупреждение скрыто (
style="display: none;"
), и вместо стандартногоdata-dismiss="alert"
, которое мы здесь использовалиdata-hide="alert"
.Вот код JavaScript для отображения предупреждения и отмены кнопки закрытия:
Если вы хотите программно скрыть или отобразить предупреждение в другом месте кода, просто выполните
myAlert.style.display = 'none';
илиmyAlert.style.display = 'block';
.источник
Проблема вызвана использованием
style="display:none"
, вы должны скрыть предупреждение с помощью Javascript или, по крайней мере, при его отображении удалить атрибут стиля.источник
Основываясь на других ответах и изменении data-dismiss на data-hide, этот пример обрабатывает открытие предупреждения по ссылке и позволяет многократно открывать и закрывать предупреждение.
источник
Я перепробовал все методы, и лучший способ для меня - использовать встроенные классы начальной загрузки
.fade
и.in
Пример:
Примечание. В jQuery addClass ('in') для отображения предупреждения и removeClass ('in') для его скрытия.
Интересный факт: это работает для всех элементов. Не только предупреждения.
источник
Вот это решение , основанное на ответ по Хенрик Карлссон , но при надлежащем случае срабатывания ( на основе источников Bootstrap ):
Ответ в основном для меня, в виде примечания.
источник
Разве это невозможно сделать, просто добавляя дополнительный div "контейнер" и каждый раз добавляя в него удаленный div предупреждения. Кажется, у меня работает?
HTML
JS
источник