如何通过单击按钮来打开和关闭引导程序警报？

Question

我想通过按钮单击事件多次显示警告框,而不必刷新页面,但警报框只显示一次.如果我想再次显示警告框,我必须刷新页面.

目前,如果在页面上呈现引导程序警报,则在关闭它时,警报的div容器将从页面中消失.因此,当您再次单击该按钮时,它不再显示.我一直在关闭按钮上执行以下操作使其隐藏而不是删除警报的div容器.

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

我想知道在引导程序中使用数据切换或数据关闭是否可以使这种切换效果工作,而无需通过我自己的自定义Javascript处理程序.

Answer 1

我遇到了同样的问题:只是不要使用data-dismiss关闭按钮并使用JQuery show()和hide():

$('.close').click(function() {
   $('.alert').hide();
})

现在,您可以使用以下代码单击按钮时显示警报:

$('.alert').show()

希望这可以帮助!

Answer 2

实际上你应该考虑使用这样的东西:

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

作为bootstrap fade/in使用CSS3而不是Jquery隐藏/显示完整的Javascript.我的观点是,在移动设备上,CSS3比Js更快.

你的HTML应该是这样的:

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a>

<div id="le-alert" class="alert alert-warn alert-block fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Alert title</h4>
  <p>Roses are red, violets are blue...</p>
</div>

这很酷!在jsFiddle中查看=)