Question

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

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

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

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

你错误地显示＆＃39;显示＆＃39;你应该尝试显示＆＃39;。

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

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

"profile" = ${spring.profiles.active} (actually Environment.getActiveProfiles())

Answer 4

引导程序4具有.d-none的{{1}}。如果您的警报中包含关闭按钮，这将非常方便。

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

.alert

Bootstrap 4显示警报

4 个答案: