JQuery Popup Uygulaması Yardım

15-03-2013, 18:25:37

Merhaba arkadaşlar
javascriptten pek anlamadığım gibi jquery konusunda hiç iyi sayılmam.
üzerinde uğraştığım bi çalışmada tıkladığım linkte açılması gereken sayfanın lightbox gibi popup şeklinde açılmasını istiyorum. yalnız açılmasını istediğim sayfa kare değil, köşeleri oval ve transparan olması gerekiyor. ayrıca araştırdığım kadarıyla bu tür uygulamalarda linke tıklandığı zaman, o sayfanın içerisinde tasarlanmış olan sabit bir şablon açılıyor.

benim çalışmamda birden fazla link olduğu için bu da birden fazla farklı sayfa demek. her sayfa kendine özgü bilgileri veritabanından çekiyor. ve her açılması gereken sayfayı mevcut sayfanın içerisinde display:block gibi bir div içerisinde saklamak istemiyorum. çünkü sayfasın içerisinde resimlerde var ve sayfanın açılmasını yavaşlatacağını düşünüyorum.

mesela sayfa.php?id=1453 gibi bir link verdiğimde bu linkte açılan sayfayı popup olarak ama köşelerini transparan kullanabileceğim şekilde göstermem lazım. veya ekstradan bir sayfa kullanmama gerek kalmadan yapabilir miyim önerileriniz nelerdir. çok uzun bir yazı oldu farkındayım ama kendimi eksik ifade etmemek için biraz uzattım bu jquery js konularında pek tecrübeli olmadığım için

15-03-2013, 19:52:43

#2

EkolWeb

Kendi popup kodunuzu yazmak en güzeli ancak yazamıyorsanız, hazır bir örneği alıp css dosyasını biraz kurcalayarak istediğiniz görüntüyü yakalayabilirsiniz, sayfada tutmak istemiyorsanız popup içeriğini jquery ile sadece popup açılacağı zaman sayfanıza çağırabilirsiniz bir çok yöntem var. Çözemezseniz yardımcı olmaya çalışırım.

15-03-2013, 21:01:36

#3

yavuzk

dediğin gibi yaptım hocam. evet css kodlarıyla oynayıp açmak istediğim sayfanın arkaplanını siyah yapıp popuptaki arkaplanla aynı saydamlığa ulaştırdım ama biraz yamama bişey oldu sanki. neyse jquery i çözmek şart oldu

biraz terleticek ama..

jquery i anlamak için tavsiye edeceğiniz kaynak var mı? şöyle kitabın ortasından başlamayan, sadece örneği yazıp bırakmayan mantığına biraz değinen

15-03-2013, 21:17:15

#4

EkolWeb

http://docs.jquery.com/UI

şuradan faydalanabilirsiniz hocam, jquery ile kendi popup uygulamanızı yapmak gerçekten çok basit bir olay bir kaç örneğe bakınca çözersiniz zaten.

16-03-2013, 11:20:38

#5

~~Vody~~

Üyeliği durduruldu

jquery.com + Notepad++ ve birazcık html ile Javascipt bilgisi.

En iyi kitap bu.

Ben size başlangıç olarak şöyle bir kod yazayım, siz hem geliştirin hemde öğrenin

<html>
<style>
.PopUp-Body{
display:none;
background:rgba(0,0,0,.4);
position:absolute;
width:100%;
height:100%;
}
.PopUp{
width:600px;
height:600px;
margin:auto auto;
position:absolute;
top:44%;
left: 44%;
background:white;
padding:12px
}
.PopUp-Body.show{
display:block;
}
</style>



<div>
İçerik <a>özellikleri<a>
</div>

<div class="popUp-body">
   <div class="popUp">
          İçeriğin özellikleri şu şekilde
    </div>
</div>



<script>
var a = $('html a'),
     popBody=$('.PopUp-Body');
a.click(function(){
      goster();
});
popBody.click(function(){
      gizle();
});
function goster(){
  $('.PopUp-Body').addClass('show');
}

function gizle(){
  $('.PopUp-Body').removeClass('show');
}
</script>
</html>

Biraz kulağını tersten göstermek gibi, uzatarak yazdım ki daha çok özellik görebilesin

Kolay gelsin