Jquery İle Basit Popup Yapımı (Leanmodal)  Jquery İle Basit Popup Yapımı (Leanmodal) | Googleda Görüntüle

Jquery İle Basit Popup Yapımı (Leanmodal)
 BEĞEN
  YORUM YAP

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

Jquery ile yapılmış ve leanmodal olarak adlandırılan bu popup'ı uygulamalarımıza çok rahat bir şekilde entegre edebilir ve geliştirebiliriz.
Çok uzatmadan direkt kodları paylaşayım :)

HTML

EmreCeyhan.net | Popup'ı görüntülemek için tıklayın.

Jquery İle Basit Popup Yapımı (Leanmodal)

CSS

#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}

#test {
width: 600px;
padding: 30px; 
display:none;
background: #FFF;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
       
}

JS

	(function($) {

    $.fn.extend({

        leanModal: function(options) {

            var defaults = {
                top: 100,
                overlay: 0.5
            }

            options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;

                $(this).click(function(e) {

                    var overlay = $("
"); var modal_id = $(this).attr("href"); $("body").append(overlay); $("#lean_overlay").click(function() { close_modal(modal_id); }); var modal_height = $(modal_id).outerHeight(); var modal_width = $(modal_id).outerWidth(); $('#lean_overlay').css({ 'display': 'block', opacity: 0 }); $('#lean_overlay').fadeTo(200, o.overlay); $(modal_id).css({ 'display': 'block', 'position': 'fixed', 'opacity': 0, 'z-index': 11000, 'left': 50 + '%', 'margin-left': -(modal_width / 2) + "px", 'top': o.top + "px" }); $("").css({ 'position': 'fixed', 'top': o.top +10+ 'px', 'left': '50%' }).click(function() { close_modal(modal_id); // icon Url }).attr('src', 'http://emreceyhan.net/upload/emreceyhan_55299912f3104.png').appendTo($(modal_id)); $(modal_id).fadeTo(200, 1); e.preventDefault(); }); }); function close_modal(modal_id) { $("#lean_overlay").fadeOut(200); $(modal_id).css({ 'display': 'none' }); } } }); })(jQuery); $("a#go").leanModal();

Demoyu görüntülemek için buraya tıklayabilirsiniz.

Etiketler

Yorumlar

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  616   2 gün önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  345   1 hafta önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  851   11 ay önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  3059   1 yıl önce

Mesut Hocaoglu 1 hafta önce demiş ki;


İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatım...
Yoruma Git

Kutay Erten 1 hafta önce demiş ki;


Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişleri...
Yoruma Git

Abdullah 1 hafta önce demiş ki;


Teşekkürler:)
Yoruma Git

Ahmet Altınkaynak 3 hafta önce demiş ki;


Site içeriğini ve samimi cevaplarınızı çok takdir ettim. Bilgiler çok işime yarıyor Teşekk...
Yoruma Git