Can Twitter Bootstrap alerts fade in as well as out?

前端 未结 10 448
夕颜
夕颜 2020-12-07 09:28

When I first saw the alerts in Bootstrap I thought they would behave like the modal window does, dropping down or fading in, and then fading out when closed. But it seems li

相关标签:
10条回答
  • 2020-12-07 10:01

    I got this way to close fading my Alert after 3 seconds. Hope it will be useful.

        setTimeout(function(){
        $('.alert').fadeTo("slow", 0.1, function(){
            $('.alert').alert('close')
        });     
        }, 3000)
    
    0 讨论(0)
  • 2020-12-07 10:07

    Of course, Yes. Use this simple file in your project: https://gist.github.com/3851727

    First add you HTML like this:

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

    and then use:

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

    You can pass all bootstrap alert types such as error, success and warning to type property as options.

    0 讨论(0)
  • 2020-12-07 10:09

    I don't agree with the way that Bootstrap uses fade in (as seen in their documentation - http://v4-alpha.getbootstrap.com/components/alerts/), and my suggestion is to avoid the class names fade and in, and to avoid that pattern in general (which is currently seen in the top-rated answer to this question).

    (1) The semantics are wrong - transitions are temporary, but the class names live on. So why should we name our classes fade and fade in? It should be faded and faded-in, so that when developers read the markup, it's clear that those elements were faded or faded-in. The Bootstrap team has already done away with hide for hidden, why is fade any different?

    (2) Using 2 classes fade and in for a single transition pollutes the class space. And, it's not clear that fade and in are associated with one another. The in class looks like a completely independent class, like alert and alert-success.

    The best solution is to use faded when the element has been faded out, and to replace that class with faded-in when the element has been faded in.

    Alert Faded

    So to answer the question. I think the alert markup, style, and logic should be written in the following manner. Note: Feel free to replace the jQuery logic, if you're using vanilla javascript.

    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');
    
    });
    
    0 讨论(0)
  • 2020-12-07 10:10

    This is very important question and I was struggling to get it done (show/hide) message by replacing current and add new message.

    Below is working example:

    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>

    Hope it will help others!

    0 讨论(0)
  • 2020-12-07 10:14

    None of the current answers worked for me. I'm using Bootstrap 3.

    I liked what Rob Vermeer was doing and started from his response.

    For a fade in and then fade out effect, I just used wrote the following function and used jQuery:

    Html on my page to add the alert(s) to:

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

    Javascript function to show and dismiss the alert.

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

    Then, to show and dismiss the alert, just call the function like this:

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

    As a side note, I styled the div.alert-messages fixed on top:

        <style>
        div.alert-messages {
            position: fixed;
            top: 50px;
            left: 25%;
            right: 25%;
            z-index: 7000;
        }
        </style>
    
    0 讨论(0)
  • 2020-12-07 10:15

    Add hide class to alert-message. Then put the following code after your jQuery script import:

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

    If you want handle multiple messages, this code will hide them in ascending order:

    $(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);
       });
    });
    
    0 讨论(0)
提交回复
热议问题