mehmetduran.com - Paylaşmak Güzeldir...
Lightbox Modal Popup
Lightbox modal popup internet sitelerinde oldukça sık kullanılan bir uygulama. Birçok alışveriş sitesinde ve bloglarda bu uygulamanın kullanıldığını gördüm. Microsoft`un çıkarmış olduğu ajax`ta da var olan bu uygulamayı kendimiz nasıl yapabiliriz ona bakalım. Tabiki bunu yapabilmek için javascript kullanacağız. Öncelikle gerekli olan javascript kodlarını head tagları arasına yazıyoruz.

Script kodlarına buradan bakabilirsiniz.

Daha sonra ise html tarafında bu uygulamayı nasıl çağıracağımıza bakalım.

lightbox_modal_popup_html

Yapacaklarımız bu kadar. Oluşan görüntü ise şöyle:

lightbox_modal_popup

Bu uygulamayı online olarak buradan görebilirsiniz.
İyi Çalışmalar!
Mehmet Duran 06 Ağustos Çarşamba 2008 21 28104 3,8
Javascript Web Tasarım Tasarım-Görsellik
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar The Ultimate Css (E-Book) Jquery ile LightBox Slayt Uygulaması Reflection (Resim Yansıması) Ajax 'Yükleniyor' Gifleri Javascript - Css ile Saydamlık
Yorumlar
Yorum Yaz
RSS Yorum Takibi
hüseyin 21 Ekim Salı 2008 14:19 #1
çok güzel vede yaralı bir site,teşekkürler hocam
Merve Aktas 11 Kasım Salı 2008 13:42 #2
cok kotu olmus ben hayatimad bole programlama gormedim bole popup mu olur hic mi orneklere bakmiyosun kac satir oldugunu fark ettin mi zamanina yazik
Mehmet Duran 11 Kasım Salı 2008 18:53 #3
Merhabalar! Örnek hoşunuza gitmemiş olabilir. Ancak bu bir popup'tır. İster kullanırsınız ister kullanmazsınız...
Gökhan ARTUK 05 Ocak Pazartesi 2009 11:37 #4
http://www.javapronews.com/javascript-custom-lightbox/ Mehmet Duran niye senin kodunla bu sitedeki kod birbirinin aynı ve senden önce yayınlanmış. Acaba.
Mehmet Duran 05 Ocak Pazartesi 2009 13:57 #5
Merhaba. Ben bu uygulamayı kendim yaptım demedim. Zaten kodları ayrıca verdim. Kodları da dediğin siteden değil başka bir siteden bulmuştum. Bu ve bu tür uygulamaları bu yazıyı yazdığım zaman yapmıyordum. Dolayısıyla bu konuyla ilgili paylaşımların başka sitelerden gördüğüm çalışmalardı. Kaynak belirmedim. Çünkü tam olarak kimin yağtığını bilmiyorum. Bilmiş olsaydım kaynak belirtirdim. Saygılar!
Mehmet Duran 05 Ocak Pazartesi 2009 14:00 #6
Ayrıca dediğin sitede yazının son paragrafını okursan daha iyi olur.
Mali Dzn 10 Ağustos Pazartesi 2009 13:14 #7
örnek tam istediğim gibi yalnız test etmek için verdiğiniz linkte; kapat yazısı çıkmıyor ve her hangi bir yazıda. sanırım sayfa çağrılmamış. lütfen linke tıkladığmızda sayfa nasıl çağırılır onuda gösterin :)
Mehmet Duran 10 Ağustos Pazartesi 2009 20:30 #8
Merhaba. Pencereyi kapatmak için "Pencereyi Kapat" yazısına tıklaman yeterli. Ayrıca bu text yerine resim koyman da mümkün. Ayrıca açılan pencere de sayfa göstermek için frame ya da Ajax kullanabilirsin.
Tarık Murat 11 Aralık Cuma 2009 23:04 #9
Arkadaşlar lütfen emeğe saygılı olalım. Mehmet bey iyi ya da kötü, yeterli ya da değil bir çok konuda bize bilgiler vermiştir. Açıkçası ben bu siteden baya yararlandım. Siz eleştirmeden önce ne yapmışsınız, kimlere ne vermişsiniz onu bir düşünün. Bu site az ya da çok bize yazılım hakkında bilgiler sağlamaktadır. Ve bugüne kadar takıldığım büyük ya da küçük bir çok sorunu bu site vasıtasıyla halletmişimdir. Lütfen eleştirmeden önce kendinize bakın!!!
Mehmet Duran 11 Aralık Cuma 2009 23:14 #10
Öncelikle yorumun için teşekkür ederim. Dediğin gibi iyi ya da kötü birşeyler paylaşıyorum. Dolayısıyla eleştiri olacaktır. Ancak iyi ya da kötü olsun her zaman yapıcı eleştiri olmalı. Birçok arkadaşımız acele iş yaptığı için ve herşeyi tas tamam hazır olarak aradığı için bazı şeylere bozulabiliyorlar. Ancak onları pek dikkate almıyorum. Benim amacım belli. Eleştirilerini dikkate alacağım insanlar belli. Onun için bazı şeyleri görmezden gelmek lazım.
muhammed 30 Aralık Çarşamba 2009 14:05 #11
Teşekkürler paylaşımın için. Güzel bir paylaşım. Başka siteden alman yada kodu kendin yazmandan çok paylaşman burda önemli olan.
Mehmet Duran 30 Aralık Çarşamba 2009 22:16 #12
Merhaba. Öncelikle bu uygulamayı kendim yazmadım. İlk yani öğrenme zamanlarımdı. Ancak öğrendikçe kendi kodlarımı yazmaya ve paylaşmaya başladım. Umarım ilgilenenler için faydalı olur.
Moda Mecra 04 Temmuz Pazar 2010 13:47 #13
Arkadaşlar, siz bu siteye ve bu konuya nasıl ulaştınız? Arama motorlarından ulaşmışsınız, cephe aldığınızdan bu bariz belli. Aradıysanız ve bunu bulduysanız ne mutlu! Ama eleştirecekseniz elbette çok fazla örnek mevcut, gidin bulun. Biliyorum ki ingilizceniz yok, bu sebeple önce Türkçe sitelere bakıyorsunuz, önce eksiklerinizi tamamlayın. Başarılar Mehmet Duran, durmak yok.
Mehmet Duran 04 Temmuz Pazar 2010 13:52 #14
Yorumun için teşekkür ederim. Eleştiri muhakkak olacaktır. Ancak bunun yapıcı olması lazım. Maalesef toplumumuzda olduğu gibi internet ortamında da yapıcı olmayanlar mevcut.
Oğuzhan Han 07 Ağustos Cumartesi 2010 16:13 #15
Hocam öncelikle paylaşımlarınız için teşekkür ederim. Hocam ben sayfa yüklendiğinde reklam amaçlı açılan popup pencere açmayı düşünüyorum. Nasıl yapabilirim yardımlarınızı bekliyorum...
Mehmet Duran 09 Ağustos Pazartesi 2010 09:57 #16
Bunun için popup scriptlerini bulup, açmak istediğin sayfalara eklentiyi ekleyerek işlemi gerçekleştirebilirsin.
Bahadır 19 Aralık Pazar 2010 18:20 #17
Merhaba. Bu modal popup'u $("#form1).load() eventinde kullanmak ve yüklenme işlemi bittiğinde otomatik kapanma işlemini yapamadım bir türlü. Yardımcı olursan sevinirim :)
Mehmet Duran 06 Ocak Perşembe 2011 11:09 #18
@Bahadır, söylediğini yapmak için $.document.ready eventını kullanmalısın.
Can Kuzu 21 Ocak Cuma 2011 08:40 #19
Merhaba, Arkadaşlar bizler için kendi öğrendiklerinden bir şeyler paylaşmaya çalışan arkadaşımıza teşekkür edeceğinize saygısızca davranıp karalamaya çalışıyorsunuz.Bu ne biçim popup diyen arkadaş daha iyi biliyorsa neden Mehmet'in yaptığı uygulamaya bakma ihtiyacı duydu merak ediyorum?Ayrıca beğenmedinse beğenmemişsindir.Olay bu kadar basit karalamaya gerek yok.
Hamdi 18 Mart Cuma 2011 00:44 #20
merhabalar hocam.ben bu modalpopupu sayfanın load olayında kullanmak istiyorum.nasıl kullanabilirim bu şekilde.teşekkürler...
Mehmet Duran 08 Nisan Cuma 2011 22:48 #21
@Hamdi, sayfanın body tagları arasında script tagları içinde fonksyionu çağırırsan istediğin yapabilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009