Twitter Bootstrap警报是否可以淡入淡出？

时间：2011-10-06 15:05:58

标签： jquery css alerts twitter-bootstrap

当我第一次看到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>

10 个答案:

答案 0 :(得分：139)

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

简答：

  

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

请参阅此jsfiddle，了解在3秒http://jsfiddle.net/QAz2U/3/

之后退出警报的示例

答案很长：

尽管真正的bootstrap本身不支持淡入淡出警报，但这里的大多数答案都使用jQuery淡入淡出函数，该函数使用JavaScript来动画（淡化）元素。这方面的最大优点是跨浏览器兼容性。缺点是性能（另见：jQuery to call CSS3 fade animation?）。

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/

答案 1 :(得分：27)

我使用的是：

在模板中显示警告区域

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

答案 2 :(得分：17)

你可以使用jquery淡入一个盒子。使用“hide”类中内置的bootstrap在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”）淡入（400）;

有关使用fadeIn函数的详细信息，请访问官方jQuery文档站点：http://api.jquery.com/fadeIn/

也只是一个旁注，如果你不使用jquery，你可以将'hide'类添加到你自己的CSS文件中，或者只是将它添加到你的div：

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

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

答案 3 :(得分：8)

对于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>

适用于所有浏览器。

答案 4 :(得分：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);
   });
});

答案 5 :(得分：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>

答案 6 :(得分：2)

我不同意Bootstrap使用fade in的方式（如文档中所示 - http://v4-alpha.getbootstrap.com/components/alerts/），我的建议是避免使用类名fade和in，并避免一般情况下的这种模式（目前在此问题的最高评价答案中出现）。

（1）语义错误 - 转换是暂时的，但是类名仍然存在。那么我们为什么要将我们的课程命名为fade和fade in？它应该是faded和faded-in，因此当开发人员阅读标记时，很明显这些元素是faded或faded-in。 Bootstrap团队已经取消了hide的{​​{1}}，为什么hidden会有所不同？

（2）对单个转换使用2个类fade和fade会污染类空间。而且，in和fade相互关联并不清楚。 in类看起来像一个完全独立的类，如in和alert。

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

警报褪色

所以回答这个问题。我认为警报标记，样式和逻辑应该以下面的方式编写。 注意：如果你正在使用vanilla javascript ，请随意更换jQuery逻辑。

HTML 

faded-in

CSS 

<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>

JQuery的

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

答案 7 :(得分：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。

答案 8 :(得分：1)

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

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

答案 9 :(得分：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>

希望它会帮助别人！

相关问题
最新问题