Bootstrap 4 显示警报

Question

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

我在文档中看到警报是如何关闭的，但不知道如何显示它： https://getbootstrap.com/docs/4.0/components/alerts/#methods

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

<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 class...

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

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

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

Answer 3

我更喜欢动态创建警报内容

<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"});
 });

Answer 4

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');

Bootstrap 4 显示警报

Bootstrap 4 Show Alerts

javascript

jquery

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4