logo标签列表

Bootstrap可关闭警告框无法正常工作。

javascripttwitter-bootstrap
19

我已经花了一个小时来解决这个bug，但似乎找不到任何解决方案！我正在使用Bootstrap，并且有一个可关闭的警告框，但是当我点击x以关闭时没有反应。

这是我的div：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Still on beta stage.
</div>

以下是我的页脚，其中包含JS文件

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2
你的代码运行良好，确保已加载Bootstrap JS，并且您的代码中没有其他错误（请检查控制台）。 - Rob M.
1
使用<span>标签而非<button>标签，查看发生了什么。 - Araz Shamsaddinlouy
1
我没有发现任何问题，已尝试 https://jsfiddle.net/5k86pyab/ ，请验证你的Bootstrap文件。 - Daniel Silveira
好的，出奇迹地，这个跨度在不改变任何其他东西的情况下起作用了！ - Dragotic
11个回答
33
如果您使用的是 Bootstrap 5.0，则在 bootstrap.js 代码中，data-dismiss 选择器已更改为 data-bs-dismiss。 所以我只需要将 data-dismiss="modal" 更改为 data-bs-dismiss="modal"，然后它就可以正常工作。
我正在使用v5.0版本，但是参考了v4.0文档中的示例。 - demoncodemonkey
15
<div class="alert alert-warning alert-dismissible" role="alert">
  <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></span>
  <strong>Warning!</strong> Still on beta stage.
</div>
对于早期版本的Bootstrap，您可能需要将容器类引用放入关闭span href属性中，而不是放入关闭span data-dismiss属性中。 - Jackie Degl'Innocenti
如何在几秒钟后自动关闭警报框？ - Mr. Wizard
@Mr.Wizard 你可以尝试这个解决方案：http://chadkuehn.com/self-closing-bootstrap-alert/。 - Fernando Morais
6
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="outline: none;">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    $('.alert').alert()
  })
</script>

使用上述代码来解决您的问题。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    $('.alert').alert()
  })
</script>

当您点击 X 消除警告时，会运行名为 alert() 的 JavaScript 函数，要使用此函数，您需要将下面给出的 script-srcs 添加到您的代码中。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。通过展示为什么这是一个好的解决方案，适当的解释将极大地提高其长期价值，并使其对未来有类似问题的读者更有用。请编辑您的答案，添加一些解释，包括您所做的假设。 - Himanshi Thakur
3
我现在正在使用Bootstrap v5.1，根据文档，该模板是：
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

参考：https://getbootstrap.com/docs/5.1/components/alerts/#dismissing

该文档介绍了如何使用Bootstrap框架中的警告组件，并提供了一些示例代码。在这个页面上，您可以学习如何使用可关闭的警告框，以及如何使用JavaScript来处理警告框的事件。此外，该文档还提供了有关如何自定义警告框的信息。
3

对于Bootstrap v.5.1，只需在alert-dismissible后添加fade show，并在class后添加btn-close和data-bs-dismiss

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Still on beta stage.
</div>
想展示如何在你的答案中添加这些类吗？ - Wes Modes
1

我也曾经遇到这个问题。虽然不是最有效的方法，但是这是我最终为我正在工作的项目解决它的方式。当条件触发警报时，我使用了以下代码：

messages.error(request,'Insert your error message here')

然后在我想要显示错误的页面模板中。其中'add_data'是显示错误的页面。

<div class="alert alert-info">
    <a class="close" href="{% url 'add_data' %}" data-dismiss="alert"></a>
           {{ message }}
</div>

我基于这个例子使用了 href="#" ，当你点击 X 时会跳转到页面顶部。 我只是把它改成了导航回同一页，这样可以清除提示信息。 希望对某些人有所帮助。

0

确保您成功地将CND添加到Bootstrap JavaScript中。 当在“入门”部分下查看时，您可能只包括了CSS链接。

将此添加到标题或在结束正文之前添加。

0
在 Bootstrap 的最新版本 5 中，data-dismiss 已更改为 data-bs-dismiss。
这个问题的最佳答案已经包含了这些信息。 - Joe Clay
0
<div class="alert alert-success alert-dismissible fade show" role="alert">

                   This is just demo alert
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

</div>

//---------script-------------------

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
0

我曾经遇到过同样的问题，但是是在使用MDBootstrap时。我的解决方案是包含Bootstrap JS，尽管MDB应该包含了Bootstrap的所有内容。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接