mehmetduran.com - Paylaşmak Güzeldir...
jQuery ile Modal Hazırlama (Eklenti ile)
Bu yazımda jQuery eklentisi olarak hazırladığım Modal uygulamasını sizlerle paylaşacağım. Birçok sitede birçok amaç için modal ile hazırlanmış uygulamalar kullanılmakta. Oldukça sık kullanılan bu uygulamayı jQuery eklentisi olarak hazırladım. Bu uygulama için CSS bilgimizin oldukça iyi olması gerekir. Özellikle tarayıcılarda sorun olmaması için tüm ayrıntıları dikkate almalıyız. CSS bilgimize göre jQuery ile html'i bütünleştirerek uygulamamızı geliştireceğiz. Şimdi eklenti olarak hazırladığım uygulamanın kodlarına ve nasıl kullanıldığına bakalım.

Öncelikle yazmamız gereken script kodlara (eklenti ve kullanım kodları) bakalım.

// Script Kodlar
(function($) {
    $.fn.Modal = function(settings) {
        var icerik = "<div id=\"Modal\"><span id=\"Kapat\">X</span></div><div id=\"ModalIcerik\"></div>";
        settings = $.extend({ opacity: "0.5", fadeTime: 500, content: "Modal Content" }, settings);
        return this.each(function() {
            $("body").append(icerik);
            $("#Modal").css("opacity", settings.opacity).fadeIn(settings.fadeTime).click(function() { kapat(); });
            $("#ModalIcerik").html(settings.content).fadeIn(settings.fadeTime).css("left", ($(window).width()/2)-($("#ModalIcerik").width()/2)).css("top", ($(window).height()/3)-($("#ModalIcerik").height()/2));
            $("#Kapat").click(function() {
                kapat();
            });
        });
        function kapat() {
            $("#Modal").fadeOut(settings.fadeTime);
            $("#ModalIcerik").fadeOut(settings.fadeTime, function() { $("#Modal,#ModalIcerik").remove(); });
        }
    }
})(jQuery);
 
// Script Kullanımı
<script type="text/javascript">
    $(function() {
        $(this).Modal({
            opacity: "0.5",
            fadeTime: 1000,
            content: "Mehmet Duran - jQuery Modal Eklentisi"
        });
        $("#ac").click(function() {
            $(this).Modal({
                opacity: "0.7",
                fadeTime: 1000,
                content: "Mehmet Duran - jQuery Modal Eklentisi"
            });
        });
    });
</script>

Bu şekilde script kodları yazdıktan sonra önemli bir adım olan CSS kodlarımıza göz atalım.

// Css Kodlar
<style type="text/css">
    #Modal
    {
      position:fixed;
      left:0;
      top:0;
      z-index:999;
      width:100%;
      height:100%;
      background:#000;
      display:none;
    }
    #ModalIcerik
    {
      position:fixed;
      background:#fff;
      padding:5px;
      z-index:1000;
      display:none;
    }
</style>

CSS kodlarımızı da yazdıktan sonra uygulamamızı kullanabiliriz. Ancak CSS kodlardaki uyumsuzluk nedeniyle bazı tarayıcılarda sıkıntılar oluşabilir. Kontrol edebildiğim kadarıyla yazmış olduğumuz kodlar tarayıcıların büyük bir bölümünde sorunsuz çalışıyor. Ancak düzgün çalışmayan tarayıcılarda mevcut. Bunlardaki sorunu CSS kodlarımızdaki uyarlamalar ile çözebiliriz.

Daha önce birçok uygulamada buna benzer örnekler kullanmıştım. Ancak çoğu eklentiler ile gelen hazır uygulamalardı. Bu şekilde kendi kodlarımız ile modal uygulamalar geliştirebiliriz. Özellikle Ajax ve Modal entegrasyonu ile çok efektif uygulamalar geliştirilebilir.

Uygulamanın çalışır halini buradan görebilir, dosyaları ise buradan indirebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 27 Eylül Pazar 2009 19 26410 5,0
jQuery Web Tasarım Jquery Tasarım-Görsellik İndir Eklenti Css Plugin
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net MVC Areas (Tek Proje Kullanarak) Asp.net ve MySql ile Üyelik (MemberShip) Sistemini Kullanma Javascript ile Datetimepicker Uygulamam Jquery ile Tooltip Uygulaması Object Oriented Javascript (E-Book)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 27 Eylül Pazar 2009 23:01 #1
ExtJs'ye geçtiğimden beri bunu saniyede yapar oldum. Bu arada eline sağlık. Böyle şeyler vermen çok yararlı. Başlarken hep böyle şeyler ilgimi çekmişti. Allah seni başımızdan eksik etmesin :)
Mehmet Duran 27 Eylül Pazar 2009 23:16 #2
Sağol Salih. :)
Arkadaş 03 Ekim Cumartesi 2009 16:34 #3
Sitenizde uygulamanız inceledim.Dikkatimi birşey çekti. Modal kapatmak için kulllandığın simge gerek yok.Çünkü sayfanın arka planına tıkladığın zaman modal kapanıyor. Ya farkında degildin ya da gözünden kaçırmış olmalısın.
Mehmet Duran 03 Ekim Cumartesi 2009 16:45 #4
Farkında olmamam söz konusu değil. Sonuçta tüm kodları ben yazdım ve ne yaptığımı biliyorum. Dediğin kontrolleri bu uygulamayı kullanacaklar olanlara birer tercih olsun diye yaptım. Hatta escape tuşu ile de kontrol edecektim. Ancak bunu yapmaktan vazgeçmiştim. Sonuçta amacım bu konuda tercih yaratmak. İsteyen istediğini kullanır. Amacım buydu. Ayrıca ilgin için teşekkür ederim.
Mehmet ÇOKTAY 11 Ekim Pazar 2009 09:13 #5
sevgili arkadaşım yaptığın örnek çok güzel.senden bir ricam olabilirmi acaba? mesela çok önemli bir duyuru yapmamız gerekiyor.modal da bu duyuruyu göstermek istiyorum.bu duyuruyu veritabanından alıp göstermesi mümkünmü? ve her gelen ziyaretçi için 1 kez göstermesi.yani ekrandaki mehmet duran ı veri tabanından çekip ip kontrolü yapıp her ziyaretçiye 1 kez göstermesi? biliyorum zahmetli bir iş.ama inan devlet kurumlarında okulların web sitelerinde çok işe yarayacak bir uygulamam olacak.teşekkürler
Mehmet Duran 11 Ekim Pazar 2009 18:20 #6
Merhaba. Söylediğin bu olayı yapmak dediğin gibi çok zahmetli değil. Yapman gereken sadece üye durumunu ve daha önceki gösterilme durumunu kontrol ederek sayfaya modal için gerekli kodları eklemek. Modal içeriğini almak için ise Ajax kullanabilirsin ve çok görsel bir uygulama yapabilirsin. Bu uygulamayı aslında Ajax örneği ile beraber yapacaktım ama zamanım yetmedi ancak bu örneği dediğin gibi ajax uygulamaları için hazırladım. Bunu yazımda da belirtmiştim.
Mehmet ÇOKTAY 01 Ocak Cuma 2010 17:40 #7
Hocam bu uygulamaya şimdi çok ihtiyacımız var.Milli Eğitimin sitesinde kullanmayı düşünüyoruz.bu konuda yardımına ihtiyacımız var.daha önce rss ve dinamik değişen alanların çok yardımcı oldu.hocam dediğim gibi çok önemli bir duyuruyu access veritabanından çekip ekranda modal olarak göstermesini istiyoruz.ajax ile ilgili pek bir bilgim yok.bu yüzden yardımına ihtiyacımız var.şayet örnek yapıp koyarsan üzerinde çalışabiliriz.inan çok yardımcı olacaksın.olumlu cevaplarını bekliyoruz.slmlar
Mehmet Duran 01 Ocak Cuma 2010 18:39 #8
Şu anda burada paylaştığım örnek kullanılabilir. Ajax isteği sonucunda gelen veriyi alıp Modal'ın içeriği olarak gösterebiliriz. Şu anda ben de çok yoğunum ve örnek yapacak vaktim yok. Bu uygulamayı geliştirdim ve Ajax sonucunu alıp modalda gösteren şekilde de hazırladım ama eksikleri var ve zaman yok. Siz buradaki şekliyle uğraşın ben de fırsat bulduğumda son halini paylaşmaya çalışırım.
Mehmet ÇOKTAY 01 Ocak Cuma 2010 18:56 #9
üzüldüm.ajaxla ilgili bilgim yok.valla yapana kadar seni bekleyeceğiz.yeni bir site yaptık ancak bu uygulamayı koymadan yayınlamayı düşünmüyoruz.seni bekliyoruz
Mehmet Duran 01 Ocak Cuma 2010 18:59 #10
Dediğim gibi kullandığım eklentinin son halinde Ajax isteği sonucu gelen veriyi direk gösterebiliyorum ama eksiklikleri var. Ancak istersen atabilirim. Boş bir mail veya mail adresini atarsan mail adresine gönderebilirim.
caner sağırkaya 21 Şubat Pazar 2010 19:46 #11
Mehmet kardeşim öncelikle kolay gelsın sitende yazdığın kodları takip ediyorum şimdi benım sorum bu elımızdeki jquery yi Firefox,Google Chrome,operada kullandığımızda hiçbi problem yok ama EXPLORER da sorun veriyor açılmıyor bu koduda bi fikir verirsen sevinirim
Mehmet Duran 21 Şubat Pazar 2010 20:03 #12
Merhaba. Bu sorunun farkındayım. İnternet explorer 6'da dediğin problem oluşuyor. 7 ve 8'de çalışmakta. 6'da çalışmama sebebi ise script kodlar değil, modal popup'ta kullanılan div elementine verilen css özelliğinin ie 6'da çalışmaması. Sadece css kodlarda ie 6 için yapılacak bir değişim ile bu sorun çözülür. Fırsat bulduğumda uygulamanın son halini sitemden paylaşacağım.
caner sağırkaya 22 Şubat Pazartesi 2010 11:13 #13
saol mehmet bende uğraşırım bu arada div'leri düzeltmek için iyi bi yol gösterdin ama ben işin içinden çıkamazdım vallahi arkadaşlar bende bil.muh okuyorum ama bu adamı gorunce baya yol kat etmek gerektiğiğ daha iyi anlıyorum ee napalım yiğidi öldür ama hakkını ver :)
Mehmet Duran 22 Şubat Pazartesi 2010 20:47 #14
Yorumun için teşekkür ederim. Kendimi geliştirme konusunda elimden geleni yapıyorum. Mümkün olduğunca da öğrendiklerimi, faydalı olacaklarına inandıklarımı paylaşmaya çalışıyorum.

Css soruna gelince de bu sorunu çözüp uygulamanın son halini paylaşacağım ama bir türlü fırsat bulamadım. Son olarak Ajax ile de çalışabilen bir hale getirdim. En kısa sürede tüm sorunları çözüp, son halini paylaşmayı düşünüyorum.
Bahadır 25 Temmuz Pazar 2010 10:44 #15
Bunun belli bir süre sonra otomatik kapanmasını sağlayabilir miyiz? Örneğin ben CodeBehind kısmında bir button ile JavaScript'i çağırıp, modal içinde "Veriler güncelleniyor. Lütfen bekleyin." tarzında birşey yazdırmak istersem ve bunu atıyorum 3 saniye sonra otomatik kapanmasını istersem? Saygılarımla
Mehmet Duran 26 Temmuz Pazartesi 2010 09:14 #16
Burada kapat fonksiyonu ile çalışan bölümü işlemi yaptıktan sonra da çalıştıracaksın. Bu fonksiyonun belli bir süre sonra çalışması için de setTimeout fonksiyonunu kullanabilirsin.
Bahadır 26 Temmuz Pazartesi 2010 14:43 #17
A evet haklısınız. Kapat fonksiyonunu RegisterClientScript ile çağırtabilirim. Yada Response.Write() ile yapabilirim. Sağolun :)
Umut 06 Mart Pazar 2011 00:10 #18
Mehmet hocam merhabalar, öncelikle sizi tebrik ve teşekkür etmek istiyorum. Siteniz üzerinde vermiş olduğunuz bilgiler gerçekten çok yararlı ve anlamlı. Bir sorum var eğer yardımcı olursanız sevinirim. JQUERY UI de bulunan ConfirmButton eklentisini Asp.net te nasıl kullanabiliriz. Asp.net ile kullandığımda confirm penceresi geliyor fakat sayfa aynı zamanda sunucuya gönderiliyor. Benim istediğim bir veriyi silerken Jquery Ui nin confirm butonunu kullanmak. Teşekürler...
Mehmet Duran 08 Nisan Cuma 2011 22:34 #19
@Umut, kullandığın eklentiyi sanırım asp.net kontrolü ile kullanıyorsun. Kontrol'ün autopostback özelliğini false olarak atamalısın ya da onclick eventında return false demelisin.
İ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.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
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