80

当我第一次在 Bootstrap 中看到警报时，我认为它们的行为会像模态窗口一样，下降或淡入，然后在关闭时淡出。但似乎它们总是可见的。我想我可以让它们位于我的应用程序上方的一层并管理显示它们，但我想知道该功能是否是内置的？

谢谢！

编辑，我到目前为止：

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
4

10 回答 10

143

我强烈不同意前面提到的大多数答案。

简短的回答：

省略“in”类并使用 jQuery 添加它以使其淡入。

有关在 3 秒后淡入警报的示例，请参阅此 jsfiddle http://jsfiddle.net/QAz2U/3/

长答案：

尽管确实 bootstrap 本身不支持淡入淡出警报，但这里的大多数答案都使用 jQuery 淡入淡出函数，该函数使用 JavaScript 对元素进行动画（淡化）。这样做的最大优势是跨浏览器兼容性。缺点是性能（另请参阅：jQuery 调用 CSS3 淡化动画？）。

Bootstrap 使用 CSS3 过渡，具有更好的性能。这对移动设备很重要：

引导 CSS 淡化警报：

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

为什么我认为这个性能如此重要？使用旧浏览器和硬件的人可能会使用 jQuery.fade() 获得断断续续的过渡。对于带有现代浏览器的旧硬件也是如此。使用现代浏览器的 CSS3 过渡即使在旧硬件上也能获得流畅的动画效果，而使用不支持 CSS 过渡的旧浏览器的人会立即看到元素弹出，我认为这比断断续续的动画更好的用户体验。

我来这里是为了寻找与上述相同的答案：淡入引导警报。在深入研究 Bootstrap 的代码和 CSS 之后，答案相当简单。不要将“in”类添加到您的警报中。当你想淡入你的警报时，使用 jQuery 添加它。

HTML（注意课堂上没有！）

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript：

function showAlert(){
  $("#myAlert").addClass("in")
}

调用上面的函数会添加“in”类并使用 CSS3 过渡淡入警报:-)

另请参阅此 jsfiddle 以获取使用超时的示例（感谢 John Lehmann！）：http: //jsfiddle.net/QAz2U/3/

于 2012-11-06T19:05:39.953 回答
28

我使用的是这样的：

在您的模板中的警报区域

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

然后是一个用于显示警报的 jQuery 函数

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');
于 2011-12-15T01:17:38.057 回答
18

您可以使用 jquery 淡入一个框。使用 'hide' 类中内置的引导程序在 div 元素上有效地设置 display:none：

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

然后在jquery中使用fadeIn函数，像这样：

$("#saveAlert").fadeIn();

也有指定淡入函数的持续时间，例如：$("#saveAlert").fadeIn(400);

可以在官方 jQuery 文档站点上找到有关使用 fadeIn 函数的完整详细信息：http: //api.jquery.com/fadeIn/

只是一个旁注，如果您不使用 jquery，您可以将“隐藏”类添加到您自己的 CSS 文件中，或者只是将其添加到您的 div 中：

 <div style="display:none;" id="saveAlert">

然后，您的 div 基本上将默认设置为隐藏，然后 jQuery 将执行 fadeIn 操作，强制显示 div。

于 2011-10-06T15:35:32.990 回答
9

对于 2.3 及更高版本，只需添加：

$(".alert").fadeOut(3000 );

引导程序：

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

适用于所有浏览器。

于 2013-02-21T23:34:07.097 回答
6

将hide类添加到alert-message. 然后在您的 jQuery 脚本导入后添加以下代码：

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

如果要处理多条消息，此代码将按升序隐藏它们：

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});
于 2011-12-15T01:10:14.867 回答
4

当前的答案都不适合我。我正在使用引导程序 3。

我喜欢 Rob Vermeer 的所作所为，并从他的回应开始。

对于淡入然后淡出效果，我只是使用编写了以下函数并使用了 jQuery：

我页面上的 Html 将警报添加到：

        <div class="alert-messages text-center">
        </div>

用于显示和关闭警报的 Javascript 函数。

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

然后，要显示和关闭警报，只需像这样调用函数：

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

作为旁注，我将 div.alert-messages 样式固定在顶部：

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>
于 2014-01-09T16:30:06.950 回答
2

我以这种方式在 3 秒后关闭了我的警报。希望它会有用。

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)
于 2014-10-15T14:33:22.673 回答
2

我不同意 Bootstrap 使用的方式fade in（如他们的文档中所见 - http://v4-alpha.getbootstrap.com/components/alerts/），我的建议是避免使用类名fade和in，并避免一般的模式（目前在这个问题的最高评价答案中可以看到）。

(1) 语义是错误的——转换是暂时的，但类名仍然存在。那么我们为什么要命名我们的类fade和fade in？它应该是fadedand faded-in，这样当开发人员阅读标记时，很明显这些元素是fadedor faded-in。Bootstrap 团队已经取消了hidefor hidden，为什么有fade什么不同呢？

(2) 使用 2 个类fade和in单个转换会污染类空间。而且，目前尚不清楚fade和in是否相互关联。该类in看起来像一个完全独立的类，例如alertand alert-success。

最好的解决方案是faded在元素淡出时使用，并在元素淡入时替换该类faded-in。

警报褪色

所以来回答这个问题。我认为警报标记、样式和逻辑应该按以下方式编写。注意：如果您使用的是 vanilla javascript，请随意替换 jQuery 逻辑。

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

jQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});
于 2016-02-20T22:26:26.243 回答
1

当然，是的。在您的项目中使用这个简单的文件：https ://gist.github.com/3851727

首先像这样添加你的HTML：

<div id="messagebox" class="alert hide"></div>

然后使用：

$("#messagebox").message({text: "Hello world!", type: "error"});

您可以将所有引导警报类型（例如error,success和）作为​​选项传递warning给属性。type

于 2012-10-13T09:53:28.537 回答
0

这是一个非常重要的问题，我正在努力通过替换当前消息并添加新消息来完成（显示/隐藏）消息。

下面是工作示例：

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

希望它会帮助别人！

于 2018-05-25T07:53:37.933 回答