gpt4 book ai didi

javascript - 单击关闭按钮时 Bootstrap 警报不会关闭

转载 作者:行者123 更新时间:2023-12-03 09:28:27 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap 警报来显示警告。一段时间后,警报会消失并消失,但我也想为用户提供自行关闭警报的选项。我按照类似问题的答案中所建议的顺序添加了 jquery 和 js/bootstrap.min.js。

这是我的 html 代码:

<div class="alert alert-warning alert-dismissible errormessage" role="alert"
style="display: none;">
<button type="button" class="close" data-dismiss="alert"
ng-click="dismissError()">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
{{ errormessage }}
</div>

这是我的 js:

//sets errormessage to be displayed
function displayError(error) {
if(error){
$scope.errormessage = error;
$('.errormessage').fadeIn(300).delay(5000).fadeOut(500);
}

$scope.dismissError = function() {
$scope.errormessage = '';
$('.errormessage').hide();
};

CSS:

.errormessage{
position: fixed;
top: 1%;
left: 50%;
margin-left: -250px;
width: 500px;
padding-top: 5px;
padding-bottom: 5px;
z-index: 9999;
text-align: center;
}

隐式关闭似乎不起作用,所以我也尝试了missError函数来自己完成它,但在调试时我发现代码流永远不会进入我的函数。

注意:我已经尝试过这样做

<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">&times;
</button>

<button type="button" class="close" data-dismiss="alert"
onclick="$('.alert').hide()" aria-hidden="true">&times;
</button>

两者都没有效果。我还尝试将 z-index 设置为 2,但仍然无法关闭警报。感谢您的帮助!

PS:我正在开发的 chrome 应用程序中使用它

最佳答案

既然你使用 AngularJs 和 Bootstrap,为什么不使用 Angular UI for Bootstrap

您可以将 ui-bootstrap-min.js 文件添加到脚本中,并为警报添加 Controller ,如下所示。 HTML 将是:

<div class="alert alert-warning alert-dismissible errormessage" role="alert" style="display: none;" ng-controller="AlertCtrl">  
<alert type="{{alert.type}}" close="closeAlert()">{{ errormessage }}</alert>
</div>

JavaScript 将是:

angular.module('ui.bootstrap.demo').controller('AlertCtrl', function ($scope) {  
$scope.alert = [
{ type: 'danger', errormessage: 'Your own error message' },
];

$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});

这不是一个很棒的 Javascript 函数,但您应该能够在它的基础上构建以获得解决方案。

关于javascript - 单击关闭按钮时 Bootstrap 警报不会关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31588868/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com