Merhaba arkadaşlar bugün sizler ile birlikte jquery destekli mesaj kutuları yapacağız, hemen hemen birçok yerde kullanabilirsiniz. Bir önizleme yukarıda var önemli olan bir şeyler yapmaktan ziyade kodlama yazdığımız kodları inceleyerek sizde kendinize göre bir şeyler yapabilirsiniz. Daha fazla uzatmadan anlatıma geçelim, gerekli dosyalar ve demo adresi makalenin en altında mevcuttur.
#uyari {
background: url('../resim/kutu.png') no-repeat;
width: 400px;
height: 48px;
color: #4f4d30;
text-shadow: 1px 1px #ffffff;
font-size: 12px;
padding-left: 70px;
margin-bottom: 20px;
}
Yukarıda uyarı isimli bir stil girdik arkaplan için bir resim atadık ve tekrar etmemesini istedik, genişlik ve yükseklik değerlerini girdik kutunun sonra kutunun içerisine yazacağımız yazının rengini ve text-shadow kodu ile beyaz bir gölge verdik yazımıza. Yazının kutunun başlangıcından sonra 70 px sola ittirdik ve sizi pek ilgilendirmesede aşağıdaki kutudan 20px ötelenmesini istedim.
.kapat {
position: absolute;
margin-left: 315px;
padding-top: 5px;
font-weight: bold;
font-family: Tahoma;
font-size: 10px;
cursor: pointer;
}
Bir kapat sınıfı açtım ve mesaj kutumuzun kapatılmasını jquery ile sağlıyacağız bunun için özelliklerimizi yazalım şimdi; pozisyonunu ben belirlemek için absolute yazdım ve soldan 315px öteledim 5px de yukarıdan font ailesini seçtim ve son olarak cursoru belirledim
.k1 {
color: #000;
}
Şimdide bir kapat stili girelim k1 olarak bir sınıf açtım ve renk olarak (#000) siyah olmasını istedim.
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Gerekli script dosyamızı kodundan önce sayfaya bağlıyoruz. Yani yukarıdaki kodu head kodundan önce ekleyiniz.
<script type="text/javascript">
$(document).ready(function(){
$('.k1').click(function() {
$('#uyari').fadeTo('slow', 0);
$(this).slideUp(0);
});
});
</script>
Yukarıdaki kodlar ile ise daha önceden css ile bir sınıf açtığımız k1 ve uyarı sınıfını bağladık bu işlem bizim mesaj kutumuzun kapanması için. En son olarak html kodlarımızıda yazıp bitirelim,
<div id="uyari">
<span class="kapat k1">X</span>
<div class="baslik">Uyarı Kutusu</div>
<div>Buraya bir uyarı mesajı yazınız.</div>
</div>
Evet arkadaşlar böylelikle mesaj kutumuzu bitirmiş oluyoruz sormak istediğiniz bir şey olursa ister özelden isterseniz yorum atarak sorabilirsiniz.
Dosyalar : rar şifresi : resulunal.com
Demo Adresi : /mesajkutusu/index.html
admin: