javascript - 如何自动关闭 BootStrap 警报？

Question

<div class="col-sm-6 form-box">
    <div class ="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert"> <i class="fa fa-times-circle-o"></i> </button>             
           <?php
                foreach ($_SESSION['error'] as $e) {
                    echo $e;
                }
                unset($_SESSION['error']);
           ?>   
    </div>
</div> 

这是我必须使用 Bootstrap 警报打印出错误的代码，但是，即使没有错误(刷新页面后)，警告框也会保留在屏幕上。

我已经尝试使用 JavaScript 来完成它，但它似乎不起作用。有人可以帮我解决这个问题。这样错误警报只会在 $_SESSION['error] 出现错误时弹出。

谢谢

Answer 1

有几种方法。

1) 如果你想在没有错误的情况下完全排除警报:

<?php if(isset($_SESSION['error']) AND ! empty($_SESSION['error'])): ?>
<div class="col-sm-6 form-box">
        <div class ="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"> <i class="fa fa-times-circle-o"></i> </button>  

           <?php
                foreach ($_SESSION['error'] as $e){
                                    echo $e;
                }
                unset($_SESSION['error']);
           ?>   
        </div>
</div> 
<?php endif; ?>

2) 只需隐藏警报但将其保留在页面上。然后你可以稍后用 JS 隐藏或显示它:

<?php $showAlert = (isset($_SESSION['error']) AND ! empty($_SESSION['error'])) ? '' :'style="display:none;'; ?>
<div class="col-sm-6 form-box">
        <div class ="alert alert-danger alert-dismissable" <?= $showAlert; ?> >
            <button type="button" class="close" data-dismiss="alert"> <i class="fa fa-times-circle-o"></i> </button>  

           <?php
                foreach ($_SESSION['error'] as $e){
                                    echo $e;
                }
                unset($_SESSION['error']);
           ?>   
        </div>
</div> 

只有几个选项，这些可以做得更好。

您还可以使用 jQuery 隐藏警报:

$('.alert').hide();