Bootstrap 3 警报 - 使用 jQuery 或 JS 显示答案

【问题标题】：Bootstrap 3 Alert - Show with jQuery or JSBootstrap 3 警报 - 使用 jQuery 或 JS 显示
【发布时间】：2015-09-18 01:18:37
【问题描述】：

我有一个类似的 Bootstrap 3 警报 div

        <div class="alert" style="background-color:#9FF781;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Done</strong> Deleted Successfully.
        </div>

我得到这样的输出-

但问题是它在页面加载时是可见的，当我点击关闭按钮时，它就消失了。

我喜欢它一开始会消失，然后通过 JS 调用出现在前面。

那么，我怎样才能让它从一开始就可见。

以及如何使用 JS 或 jQuery 恢复它。

有什么办法吗？

请帮忙。

【问题讨论】：

您可以将其设置为隐藏样式，然后使用 jQuery 再次.show() 元素。首先将style 更改为background-color:#9FF781; display:none;
感谢您的帮助。

标签： jquery html twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

引导警报Docs

您必须使用hide 或show（jQuery 方法）来隐藏或显示警报div。

检查一下

$('#toggleAlert').click(function() {
  $('.alert').toggle()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<div class="alert alert-success alert-dismissible" style='display:none;'>Test
  <button data-dismiss="alert" type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<input type="button" id="toggleAlert" value="Toggle Alert" />

注意：警报中的关闭按钮，如果单击该按钮，Bootstrap 将从 DOM 中删除 alert div。因此，如果您想再次显示alert，请使用按钮toggle div，而无需在警报中使用关闭按钮。

【讨论】：