Twitter Bootstrap警告框无法关闭。

Question

我正在使用Twitter Bootstrap框架设计网页的一些部分。

我尝试设置一个可以关闭的提示框。我的代码看起来就像这样：

<div id="index-alert" class="alert alert-danger .alert-dismissible">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <b>An Error occured</b>
</div>

页面右上角有一个可点击的 X，但是点击后没有任何反应。

Firebug控制台也没有显示任何错误信息。

我使用的是Bootstrap版本3.2.0。

请问有人知道我做错了什么吗？

- tdog4224

---

只需将bootstrap.js包含到您的代码中，就足够了。 - Arun_SE

Answer 1

你应该写 alert-dismissible 而不是 .alert-dismissible ;)

而且别忘了在 </body> 结束标签前添加 jQuery.js 和 bootstrap.js 两个文件。jQuery 必须先添加：

<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap.min.js"></script>

- ZeFifi

Answer 2

试试这个

<div id="index-alert" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <b>An Error occured</b>
</div>

如果失败了，请确保您已经引用了 <script src="js/bootstrap.min.js"></script>。

- Danieloplata

Answer 3

如果这些答案都不可行，您可以将内联JavaScript放入HTML标记中。

免责声明：这是一种不好的做法，如果可能的话，请不要编写此类代码。

现在试试这个：

<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" onclick="this.parentElement.style.display='none';"><span>×</span></button> This is a dismissable message.
</div>

- Partha Prateem Patra

Answer 4

我知道这个答案可能已经对你没有帮助了，但是以下方法对我有效：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>XXXXXX</strong> XXXXXX.
   <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

- richie101