Question

我正在尝试使用引导警报来显示警告。警报在一段时间后消失并解散，但我也想让用户自己关闭它。我已按顺序添加了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;
}

隐式关闭似乎没有工作，所以我也尝试了dismissError函数来自己做，但是在调试时我发现代码流永远不会进入我的函数。

注意：我已经尝试过了

<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：我在我正在开发的chromeapp中使用它

Answer 1

由于您使用AngularJs和Bootstrap，为什么不使用Angular UI for Bootstrap？

您可以将ui-bootstrap-min.js文件添加到脚本中，并为警报添加控制器，如下所示。 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函数，但你应该能够在它上面构建解决方案。

单击关闭按钮

1 个答案: