JQuery Kotak Pesan Muncul dari Atas

by Taufik Nurrohman

HTML

<div id='kotak-pesan'>
    <h1>Ah, masaaaAAAA!!!!!</h1>
<a class='close' href='#'>&#215;</a>
</div>

<button class="open">Buka Kotak Pesan</button>

CSS

body {padding:30px;background-color:#C07303;}

#kotak-pesan {
  position:fixed !important;
  position:absolute; /* IE6 */
  top:-1000px;
  left:50%;
  margin:0px 0px 0px -182px;
  width:300px;
  height:auto;
  padding:16px;
  background:#E9CF5F;
  border:2px solid #fff;
  font:normal 1em Cambria,Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#kotak-pesan a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background:#333;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:#fff;
  border:2px solid #fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}

JavaScript

$(function() {
    $('button.open').click(function() {
        $('#kotak-pesan').animate({top:"50px"}, 1000);
        return false;
    });
    $('a.close').click(function() {
        $(this).parent().animate({top:"-1000px"}, 1000);
        return false;
    });
});