2013-10-16 26 views
6

Ben leanModal'ın nasıl çalıştığını anlamaya çalışıyorum ama bunu anlayamıyorum. Kurulumu buradan takip ettim: http://leanmodal.finelysliced.com.au/?#. 3. Adım diyorÇalışmak için leanModal alamıyorum

<script type="text/javascript"> 
    $('#btnToCreate-Join').click(function() { 
      $("#trigger_id").leanModal(); 
    }); 
</script> 

"senin modal tetikte işlevini çağırmak, aşağıdaki gibi: Ancak, benim html dosyasında bu işlevi kurdunuz 3.

adım için ne yapacağını anlamıyorum Tetikleyici bağlantınızın href özniteliğini, hedef öğenizin kimliğiyle eşleşecek şekilde ayarladığınızdan emin olun. "

Modal tetikleyicinin, pencereyi açmak için tıklatmak istediğim düğme olduğunu varsayıyorum. İkinci cümlenin ne anlama geldiğinden emin değilim. Yardım için teşekkürler!

cevap

5

This is a sample pen demo for you. Sizin html böyle olmalı:

<a id="go" name="test" href="#test">Basic</a> 

<div id="test"> 
    bla bla bla 
</div> 

Sen böyle olmalı css:

#lean_overlay { 
    position: fixed; 
    z-index:100; 
    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); 
} 

Kişisel javascript böyle olmalı: Ben leanmodal senaryoyu başvurulan varsayıyorum belgenizdeki başlığında ve tarayıcı konsolunda herhangi bir hata almıyorsunuz. $ Olduğu gibi (document) .ready()

<script type="text/javascript"> 
    $("#go").leanModal(); 
</script> 
+0

Kodumu bu şekilde görünecek şekilde değiştirdim ancak düğmeyi tıkladığımda pop-up'ı hala alamıyorum. Ekleyecek bir şey eksik miyim? – user2888360

+0

@ user2888360 Size cevabımda size örnek bir demo bağlantısı verdim. tıklayın - kontrol edin ve kodu görüntülemek için tarayıcının sol alt kısmındaki 'Bu Kalem Düzenle 'seçeneğine tıklayın. –

+0

@ user2888360, demodaki js alanına eklediğim büyük çirkin js kodunu - yani asıl yalın eklenti kodu - yok sayıyor. Kullanacağınız tetikleyici ifadesinin kullanması gereken yere kaydırın - jquery'nin hazır işlevi altındadır. –

1

deneyin:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#btnToCreate-Join').click(function() { 
      $("#trigger_id").leanModal(); 
     }); 
    }); 
</script> 
İlgili konular