Bootstrap 4 显示警报

Question

在 Bootstrap v4 中，如何通过 JavaScript 显示警报？我的目标是在页面加载时隐藏警报，然后在 AJAX 调用完成时打开警报以显示消息。

我在文档中看到如何关闭警报，但没有在哪里显示它： https://getbootstrap.com/docs/4.0/components/alerts/#methods

我有以下小提琴，我首先显示警报（不是我想要的），然后按一个按钮将其关闭。第二个按钮可以将其重新打开，但不知道传递给它的内容以使其工作。我想如果我可以使这个示例工作，那么我可以弄清楚如何使它与页面加载上未显示的警报一起工作

https://jsfiddle.net/jhf2e5h6/

<div class="row">
  <div class="col-sm-12">
     <div id="divInfo" class="alert alert-success show fade ">
        <div class="alert-heading"> :</div> <p></p>
     </div>
 </div>
</div>

<button id="close">Close</button>
<button id="show">Show</button>




<script type="text/javascript">
    $(function () {




        $('#close').on('click', function () {
            $('#divInfo').alert('close');
        });

        $('#Show').on('click', function () {
            $('#divInfo').alert('?????');
        });

        // 
    });


</script>

Answer 1

方法 .alert 破坏 DOM。所以没有回头的可能。看看文档： https://getbootstrap.com/docs/4.0/components/alerts/#methods

您应该尝试使用 removeClass/addClass。

$('#close').on('click', function () {
    $('#divInfo').removeClass('show');
});

$('#show').on('click', function () {
    $('#divInfo').addClass('show');
});

你在'Show'上有错误，你应该尝试'show'。

Answer 2

close 将其从 DOM 中移除，因此无法重新显示。

您可以改为切换 invisible 类...

https://www.codeply.com/go/mbshAxZQMH

 $(function () {
    $('#close').on('click', function () {
        $('#divInfo').addClass('invisible');
    });

    $('#show').on('click', function () {
        $('#divInfo').removeClass('invisible');
    });
});

Answer 3

Bootstrap 4 有.d-none，它有display: none。如果您的警报包含关闭按钮，这会派上用场。

因此，将.d-none 添加到您的.alert 元素（例如在页面加载时），然后执行以下操作：

// Show the alert
$('.alert').removeClass('d-none').addClass('show');

// Hide the alert
$('.alert').addClass('d-none').removeClass('show');

Answer 4

我更喜欢动态创建提醒内容

<div id="alert"></div>

<script type="text/javscript">
function showAlert(obj){
    var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
        '   <strong>' + obj.message + '</strong>'+
        '       <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
        '           <span aria-hidden="true">×</span>'+
        '       </button>'
        '   </div>';

    $('#alert').append(html);
}

 $('#Show').on('click', function () {
    showAlert({message: 'Hello word!', class:"danger"});
 });