2013-06-02 18 views
10

Magnific Popup'da, DOM'da bazı değişiklikler yapmak için tıklatılan bağlantıda bir öznitelik almak ve bir geri arama işlevinde kullanmak (geri aramaları kullanarak: açık) kullanmak istiyorum.Magnific popup: Geçerli öğeyi geri arama yapın

Bunu nasıl yapabilirim? Örneğin, aşağıdaki kodda, 'işe yarayan' konsola geri dönmelidir. Bunun yerine, 'çalışmıyor' yazdırır. Lütfen yardım et!!

<a href="#test-popup" class="open-popup-link" myatt="hello">Show inline popup</a> 

<script src="jquery.magnetic.custom.js"></script> 

<script> 

    $(document).ready(function() { 
     $('.open-popup-link').magnificPopup({ 
     type:'inline', 
     midClick: true, 
     callbacks: { 
      open: function() { 

      if ($(this).attr('myatt')=="hello") 
      { 
       // do something 
       console.log("it works"); 
      } 
      else 
      { 
       console.log("doesnt work"); 
      } 

      }, 
      close: function() { 

      } 
     } 

     }); 
    }); 

</script> 

<div id="test-popup" class="white-popup mfp-hide"> 
    Popup content 
</div> 

cevap

0
// "item.el" is a target DOM element (if present) 
// "item.src" is a source that you may modify 
open: function(item) {} 

ve örnek veri Myatt data-özelliklerini kullanmak - get:

$(this).data('myatt') 
6

Birincisi, ben veri niteliğini (veri-özel kullanımı size tavsiye = "foo ") veya bilinen bir özellik.

HTML:

<a href="photo.jpg" class="popup" data-custom="dsaad">Do it!</a> 
    <a href="photo.png" class="popup" data-custom="mycustomdata">Do it!</a> 

jQuery:

$('.popup').magnificPopup({ 
    type : 'image', 
    callbacks : { 
    open : function(){ 
     var mp = $.magnificPopup.instance, 
      t = $(mp.currItem.el[0]); 

     console.log(t.data('custom')); 
    } 
    } 
}); 

daha iyi bir yolu olup olmadığını bilmiyorum. Aslında kamu yöntemleri ile ilgili belgelerini okuyabilirsiniz ve orada göreceksiniz. , Geri arama İçinde

this.st.el 

: Yukarıdaki kodu test edilmiş ve her şey

var magnificPopup = $.magnificPopup.instance, 
       cur = magnificPopup.st.el; 
console.log(cur.attr('myatt')); 
+2

yukarıda not etmek sadece Magnific Popup eski sürümleri için çalışır. Eğer 0.9.8 sürümünden herhangi bir şey kullanıyorsanız lütfen aşağıdan @Konpaka cevabına bakınız. – Styledev

12

Magnific Popup v0.9.8 için çalışıyor "bu" $ .magnificPopup.instance anlamına gelir. Kamu özellikleri altında

:

open: function(item) {} içinde Ayrıca

0

tıklanan öğenin kullanarak callback'inde içinde ulaşılabilir :)

0

"magnificPopup.st.el // Hedef açılır pencere (pop-up DOM öğesinden başlatılır çalışır) açılan öğeyi tıklayıp", this.content kudreti yardım .. Gösterilen içeriğin div döner. change: function() {} ile de faydalıdır. Umarım benim gibi birine yardım eder. v için