Twitter Bootstrap警报可以淡入和淡出吗？

78

当我第一次在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>
jquery  css  alerts  twitter-bootstrap 
— 克里克
source

Answers:

141

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

简短答案：

忽略“ in”类，并使用jQuery将其淡入。

请参阅此jsfiddle示例，该示例会在3秒钟后自动消失警报http://jsfiddle.net/QAz2U/3/

长答案：

尽管确实如此，引导程序本身并不支持警报中的淡入淡出，但此处的大多数答案都使用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/

— DivZero
source
Internet Explorer不支持transition属性，而IE8及以下版本不支持不透明性，您必须使用filter属性。因此，任何想使用此方法的人都建议进行优雅降级。
— 昂贵的2013年
17
好吧，它确实会降级。即不淡入或淡出。如果您确实需要淡入淡出，那么引导方法不适合您。如果它只是给您的设计增加了额外的光彩，并且想要一个未来/可移动证明的网站，请按照我的方式做：用具有精美动画的现代浏览器奖励用户，并为那些不喜欢的用户忽略它们。而不是因为它们使用了过时的硬件/软件，而使它们可能不连贯/不稳定。
— DivZero 2013年
1
我在下面发布了替代答案。虽然我同意这个答案最适合性能，但我认为它会污染标记。尚不清楚类fade和in关联。如标记所示class="alert alert-success fade in"。本in类看起来像一个完全独立的类，如alert或alert-success。最好使用类名faded-in（fade应该是faded），过渡是临时的，但类名仍然存在。
— tfmontague '16
要使它在Bootstrap 4中工作，请使用此类，"show"而不是"in"
— DigitalDan
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!');
— 罗伯·维米尔
source
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();

还为fadeIn函数指定了持续时间，例如：$（“＃saveAlert”）。fadeIn（400）;。

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

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

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

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

— 克里克
source
8
这不会为我淡出警报消息，而只是显示它。
— dmackerman 2011年
2
自Bootstrap 3起，该功能将不再起作用-参见github.com/twbs/bootstrap/pull/6342，杂项
— 卡尔，
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>

在所有浏览器中均可使用。

— pri
source
优雅而简单，谢谢。我喜欢没有必要编写js的事实。有一种方法可以更改淡入淡出的行为，例如使淡入淡出时间更长？
— 卡洛斯·莫拉
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);
   });
});
— 身份
source
4

当前的答案都没有对我有用。我正在使用Bootstrap 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>
— 克里斯
source
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类看起来像一个完全独立的类，如alert和alert-success。

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

警报褪色

所以回答这个问题。我认为警报标记，样式和逻辑应以以下方式编写。注意：如果您使用的是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');

});
— tfmontague
source
1

3秒钟后，我用这种方法关闭了我的“警报”。希望它会有用。

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)
— 维卡多索
source
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>
展开摘要

希望对别人有帮助！

— 维卡斯迪普·辛格（Vikasdeep Singh）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.