Tạo hộp thông báo với JQuery

Lê An    8/07/2014    Thủ thuật blog    Comments   

Demo
Một thủ thuật Blog giúp bạn tạo ra 1 hợp thoại hiện ra ngay khi vào trang với. Nó phù hợp cho bạn để tạo ra 1 bản thông báo hay gắng 1 tiện ích kèm theo. Với 3 bước đơn giản.
1. Bạn đăng nhập vào giao diện chỉnh sữa Blog.
Mẫu -> Chỉnh sửa HTML.

CSS

Sau đó bạn tìm đến thẻ ]]></b:skin>. Dán toàn bộ code ngay phía trên thẻ ]]></b:skin>.

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

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

JQuery

Tiếp theo bạn dán đoạn code sau vào ngay phía trên thẻ </head>

<script type='text/javascript'>
$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"50px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>

HTML

Bạn vào phần Bố Cục tạo một tiện ích HTML dán code này vào. (Bạn có thể đặt cố định trong Mẫu Blog bằng cách đặt nó ngay trên thẻ </body> )

<div id='kotak-pesan'>
Bạn có thể đặt Code/HTML các tiện ích hay những dòng thông báo tại đây
<a class='close' href='#'>&times;</a>
</div>

Nguồn: www.dte.web.id