Son zamanlarda çok meşhur olan css mesaj kutularına bir yenisi daha geldi. Hemen sizlerle paylaşıyorum. Üç farklı çeşidi mevcut.Hangisini isterseniz kullanablirsiniz. Buyrun demo ve kodlar.
 

İlk olarak bu kodu ekliyoruz. ardından da eklemek istediğimiz mesaj kutusunun kodunu ekliyoruz. (Bu koddan bir sayfada bir tane olması yeterli.)

Kod:

<link href=”http://tugrawebdata.com.nu/mesajkutusu/css/style.css” media=”screen” rel=”stylesheet” type=”text/css” /> <script src=”http://tugrawebdata.com.nu/mesajkutusu/js/jquery-1.4.4.min.js” type=”text/javascript”></script> <script type=”text/javascript”> $(document).ready(function(){ $(‘.ku’).click(function() { $(‘#uyari’).fadeTo(‘slow’, 0); $(this).slideUp(0); }); $(‘.kh’).click(function() { $(‘#hata’).fadeTo(‘slow’, 0); $(this).slideUp(0); }); $(‘.kb’).click(function() { $(‘#basarili’).fadeTo(‘slow’, 0); $(this).slideUp(0); }); }); </script></body></html>

Uyarı:

<div id=”uyari”> <span>X</span> <h4>Uyarı Mesaj Başlığı</h4> <p>Merhaba. Ben bir uyarı mesajıyım.</p> </div></body></html>

Hata:

<div id=”hata”> <span>X</span> <h4>Hata Mesaj Başlığı</h4> <p>Hata. bu mesajı görüyorsanız birşeyler ters gidiyor.</p> </div></body></html>

Başarılı:

<div id=”basarili”> <span>X</span> <h4>Başarılı Mesaj Başlığı</h4> <p>Merhaba. Ben bir uyarı mesajıyım.</p> </div></body></html>

Yapımcı:Psdup.com