Question

我想在JavaScript函数中添加Bootstrap警报消息。

例如：

<div class="alert alert-success fade in">
     <a href="#" class="close" data-dismiss="alert">&times;</a>
     <strong>Success!</strong> Your message has been sent successfully.
</div>

上述div内容显示成功消息。如果我的Web服务返回成功消息，我想在我的JavaScript代码中调用它。

Answer 1

您可以设置切换Web服务返回。此示例使用单击功能。

＆＃13;

function toggleAlert(){
    $(".alert").toggleClass('in out'); 
    return false; // Keep close.bs.alert event from removing from DOM
}


$("#btn").on("click", toggleAlert);
$('#bsalert').on('close.bs.alert', toggleAlert)

＆＃13;

<link rel="stylesheet" type="text/css"  href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="btn">Toggle</button>

<div class="alert alert-info fade out" id="bsalert">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Info!</strong> This alert box could indicate a neutral informative or action
</div>

<div>
    content

＆＃13;

Answer 2

创建class以初始隐藏alert

.hide{
  display:none
}

<div id = "alertId" class="alert alert-success fade in hide">
       //rest of code
</div>

在成功函数的js中

 document.getElementById('alertId').classList.remove('hide')

Answer 3

$("#success-alert").hide();
$("#test").click(function showAlert() {
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
   $("#success-alert").slideUp(500);
    });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">

<div>
    <button id="test">Result</button>
</div>

<div class="alert alert-success" id="success-alert">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Success!</strong> Your message has been sent successfully.
</div>

您可以使用上面的代码段代码，但在返回服务器结果后将代码放在按钮.click()事件中。

如何在javascript函数中使用bootstrap警报消息？

3 个答案: