Javascript 引导程序4显示警报

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

我在文档中看到如何关闭警报，但没有看到在何处显示警报：

我有下面的提琴，我首先显示警报（不是我想要的），然后按下按钮关闭它。第二个按钮是用来打开它的，但不知道该传递什么来让它工作。我想如果我可以让这个示例工作，那么我就可以找出如何使它与页面加载上未显示的警报一起工作

：

关
显示
$（函数（）{
$（'#close'）。在（'click'，函数（）{
$（'divInfo'）。警报（'close'）；
});
$（'#Show'）。在（'click'，函数（）{
$（'#divInfo'）。警报（'？？？'）；
});
// 
});

方法。警报将销毁DOM。所以不可能回去。查看文档：

您应该尝试使用removeClass/addClass

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

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

---

如果在“Show”上出现错误，则应尝试“Show”。

方法。警报会破坏DOM。所以不可能回去。查看文档：

您应该尝试使用removeClass/addClass

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

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

---

如果“Show”出现错误，则应尝试“Show”。

close

将其从DOM中删除，以便无法重新显示

您可以切换

不可见

类

---

close

将其从DOM中删除，因此无法重新显示

您可以切换

不可见

类

---

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

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

功能showAlert（obj）{
var html=''+
“”+obj.message+””+
'       '+
'           ×'+
'       '
'   ';
$（'#alert'）.append（html）；
}
$（'#Show'）。在（'click'，函数（）{
showarert（{message:'Hello word！'，类：“danger”}）；
});

---

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

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

功能showAlert（obj）{
var html=''+
“”+obj.message+””+
'       '+
'           ×'+
'       '
'   ';
$（'#alert'）.append（html）；
}
$（'#Show'）。在（'click'，函数（）{
showarert（{message:'Hello word！'，类：“danger”}）；
});

---

引导程序4具有

.d-none

，它确实显示

无

。如果您的警报包含“解除”按钮，则此功能非常方便

因此，将

.d-none

添加到

.alert

元素中（例如，在页面加载时），并执行以下操作：

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

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

---

引导程序4具有

.d-none

，它不显示

：none

。如果您的警报包含“解除”按钮，则此功能非常方便

因此，将

.d-none

添加到

.alert

元素中（例如，在页面加载时），并执行以下操作：

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

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

---

这并不能真正回答问题，因为这将在页面加载时立即显示警报，而不是等待AJAX调用完成。更新为单击按钮时显示警报，或者当AJAX调用完成时（如前所述），这并不能真正回答问题，因为这将在页面加载时立即显示警报，而不是等待AJAX调用完成。更新为单击按钮时显示警报，或者在AJAX调用完成时显示警报