Question

我希望我的按钮在点击后显示警告并保持关闭直到关闭。

在我的网页上，每次按下按钮，警报会在屏幕上闪烁一秒钟。

在我的jsfiddle上，警报一直显示，直到关闭，但再次点击按钮时不再出现。

有什么想法吗？

HTML

<div class="form-group">
  <div class="col-lg-10 col-lg-offset-2">
    <button type="submit" class="btn btn-primary">Submit</button>
    <div class="alert alert-dismissible alert-success">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Completed!</strong> Form successfully submitted...
    </div>
  </div>
</div>

CSS

<style>
    .alert {
        display: none;
    }
</style>

JS

<script>
    $(document).ready(function () {
        $('button').click(function () {
            $('.alert').show()
        })
    });
</script>

Answer 1

试试这个： See DEMO

当您使用data-dismiss="alert"时，它会完全删除alert div。所以，你试试这样。

<body>
    <button type="submit" class="btn btn-primary">Submit</button>
    <div class="alert alert-dismissible alert-success">
        <button type="button" class="close">&times;</button>
        <strong>Completed!</strong> Form successfully submitted...
    </div>
</body>

JS：

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }); 

    $('button').click(function(){
        $(this).parents('div').hide();
    }); 
});

CSS：

.alert{
    display: none;
}

如何阻止Bootstrap警报自动消失？

1 个答案: