我已经解决这个错误一个小时了,似乎找不到任何解决方案!我正在使用引导程序并且我有一个可关闭的警报但是当我点击 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">×</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>
如果您使用的是 Bootstrap 5.0,那么在
bootstrap.js
代码中,data-dismiss
选择器似乎已更改为 data-bs-dismiss
。
所以我只需要将 data-dismiss="modal"
更改为 data-bs-dismiss="modal"
就可以了。
<div class="alert alert-warning alert-dismissible" role="alert">
<span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></span>
<strong>Warning!</strong> Still on beta stage.
</div>
<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">×</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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
我现在正在使用 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 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">×</span></button>
<strong>Warning!</strong> Still on beta stage.
</div>
我也一直在和这个作斗争。这不是最有效的方法,但这是我最终为我正在从事的项目解决它的方法。 在我看来,当条件触发警报时,我使用了以下代码。
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 时它会转到页面顶部。 我只是将其更改为导航回清除警报消息的同一页面。 希望这对某人有帮助。
确保您已成功将 CND 添加到 BootStrap Javascript。在“入门”部分下查看时,您可能只包含了指向 CSS 链接的链接。
将此添加到您的页眉或就在您的关闭正文之前。
<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">×</span>
</button>
</div>
//---------script-------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
我遇到了同样的问题,但是使用了 MDBootstrap。我的解决方案是包含 Bootsrtap JS,即使 MDB 应该包含 Bootstrap 中的所有内容。
尝试使用这个功能
$('.close').click(function(){
$(".test").css("display", "none");
或
$('.test').hide();
});
并在 span 标签中声明一个类
<strong class="test">Warning!</strong> Still on beta stage.
应该工作
在 Bootstrap 的最新更新版本 5 中,
data-dismiss
更改为 data-bs-dismiss
.