Jquery-Meldungen für mehrere Meldungen

Question

Ich versuche, eine Nachricht vom Typ stackoverflow zu erstellen. Ich fand den Großteil des Codes, den ich von anderen Posts benötigte, hatte aber Probleme beim Schließen von Nachrichten, wenn mehrere Benachrichtigungen verwendet wurden. wenn das zweite Feld von 3 geschlossen war ideal, dann wäre es abklingen und das dritte Feld würde der zweite Platz

HTML

<div class="message" style="display: none;"> 
     <span>Hey, This is my Message.</span> 
     <a href="#" class="close-notify">X</a> 
    </div> 

    <div class="message" style="display: none;"> 
     <span>Hey, This is my Message.</span> 
     <a href="#" class="close-notify">X</a> 
    </div> 

    <div class="message" style="display: none;"> 
     <span>Hey, This is my Message.</span> 
     <a href="#" class="close-notify">X</a> 
    </div> 

CSS

div.message { 
    font-family:Arial,Helvetica,sans-serif; 
    float: left; 
    left:0px; 
    width:100%; 
    height:15px; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

.message span { 
    text-align: center; 
    font-size:1.1em; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    top: 0px; 
    font-size:1.1em; 
    float:right; 
    margin-right:10px; 
    margin-top: -15px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left: 6px; 
    padding-right: 6px; 

} 

JQuery

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".message").fadeIn("slow"); 
     $(".message a.close-notify").live('click', function() { 
      $(this).parent().fadeOut('fast', function() { $(this).parent().remove(); }); 
      return false; 
     }); 
    }); 
</script> 

nehmen

Answer 1

Versuchen Sie nicht, false zurückzugeben, und verwenden Sie preventDefault, um zu verhindern, dass der Link befolgt wird. Versuchen Sie auch, zu ändern ing die Wähler parent/child zu verwenden, und closest statt Eltern in fadeOut der anonymen Funktion:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".message").fadeIn("slow"); 
     $(".message > a.close-notify").live('click', function(e) { 
      e.preventDefault(); 
      $(this).parent().fadeOut('fast', function() { $(this).closest('.message').remove(); }); 
     }); 
    }); 
</script> 

Answer 2

Wenn das Problem die Reihenfolge der Nachrichten ist, dann können Sie z-index verwenden. Haben Sie eine Variable, die Sie für jede neue Nachricht inkrementieren und dem Z-Index der Nachricht zuweisen.