Jquery Multiple Notice Messages

Question

stackoverflowタイプの通知メッセージを作成しようとしています。私は他の投稿から必要なコードのほとんどを見つけましたが、複数の通知が使用された場合、メッセージを閉じるのに問題がありました。 3のうち2番目のボックスが閉じられた場合には理想的には、それが消えていくだろうと3番目のボックスは

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> 

第二の場所を取るだろう

Answer 1

falseを返さずに、preventDefaultを使用してリンクの追跡を停止してみてください。 parent/childを使用するようにセレクタをすると、フェードアウトの匿名関数でclosestを使用して代わりの親：問題は、メッセージの順序がある

<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

場合、あなたはz-indexを使用することができます。新しいメッセージがあるたびにインクリメントし、メッセージのz-indexに割り当てる変数があります。