Make DIV popout

by emgee

HTML

<a class="floatbar" href="http://www.msn.com">Click here
    <div id="booyah" class="popup">Hey there</div>
</a>
<a class="floatbar" href="#">Click here as well
    <div class="popup">Hi there</div>
</a>
<a class="floatbar" href="#">Click here as well
    <div class="popup">Ho there</div>
</a>

CSS

.floatbar {
    display:block;
    position:relative;
    border:1px solid red;
}

.popup {
    position:absolute;
    top:-200px;
    left:0px;
    height:330px;
    width:10em;
    background:#ccc;
    display:none;
    z-index:2;
}

JavaScript

$(".floatbar").click(function(e){
    e.preventDefault();
    $(this).find(".popup").fadeIn("slow");
    return !1;
});

$(".popup").click(function(e){
    $(this).fadeOut("slow");
    return !1;
});