Question

我一直在研究这个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>

Answer 1

<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>

Answer 2

<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() 的 js 函数，要使用此函数，您需要将下面给出的脚本源代码添加到您的代码

<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>

Answer 3

尝试使用此功能

$('.close').click(function(){
     $(".test").css("display", "none");

或

  $('.test').hide();

}）;

并在span标记中声明一个类

<strong class="test">Warning!</strong> Still on beta stage.

应该工作

Answer 4

确保您已成功将 CND 添加到 BootStrap Javascript。在查看“入门”部分时，您可能只包含了 CSS 链接的链接。

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

Answer 5

如果您使用的是 Bootstrap 5.0，则 bootstrap.js 代码中的 data-dismiss 选择器似乎已更改为 data-bs-dismiss。所以我只需要将 data-dismiss="modal" 更改为 data-bs-dismiss="modal" 就可以了。

Bootstrap不允许的警报无法正常工作

5 个答案: