jquery - Bootstrap 3 Alert - 用 jQuery 或 JS 显示

Question

我有一个类似的 Bootstrap 3 alert 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 恢复它。

有什么办法吗？

请帮忙。

Answer 1

Bootstrap 警报 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，而无需在 alert 中使用关闭按钮。