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

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...

  791   10 ay önce

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

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

  2882   1 yıl önce

Input Değerlerini Ön Belleğe Alma [ localStorage ]

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması...

  1540   1 yıl önce

Javascript İle Upload Öncesi Görselleri Önizlemek

Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz and...

  2270   1 yıl önce

Engin Pala 2 hafta önce demiş ki;


Teşekkür ederim ben işe koyuluyorum o zaman :D
Yoruma Git

Engin Pala 2 hafta önce demiş ki;


Merhaba Emre bey döviz kurlarının sürekli değişmesi mümkün mü yani anlık olarak nasıl çe...
Yoruma Git

Misafir 2 hafta önce demiş ki;


hocam bilgi için teşekkürler
Yoruma Git

sadık ikinci 1 ay önce demiş ki;


Emre bey, sizin kodlar ile merkez bankasından döviz değeri çekip, sitede para birimi dönüştü...
Yoruma Git