Jquery несколько уведомлений

Question

Я пытаюсь создать уведомление о типе stackoverflow. Я нашел большую часть кода, который мне был нужен из других постов, но у меня были проблемы с закрытием сообщений, если использовалось несколько уведомлений. В идеале, если вторая коробка из 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 и не использовать предотвращение следования ссылки с помощью protectDefault, а также попробуйте изменить селектор для использования parent / child и использовать ближайший вместо parent в анониме fadeOut. функция:

<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 сообщения.