2013-10-16 15 views
6

Sto cercando di capire come funziona leanModal ma non riesco a capirlo. Ho seguito la configurazione dal loro sito qui: http://leanmodal.finelysliced.com.au/?#. Tuttavia, non capisco che cosa fare per il passo 3.Impossibile ottenere leanModal per funzionare

Ho creato questa funzione nel mio file html:

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

Punto 3 dice "Chiamare la funzione sul grilletto modale, come segue Assicurati di impostare l'attributo href dell'ancoraggio del grilletto in modo che corrisponda all'id dell'elemento target. "

Suppongo che il trigger modale sia il pulsante su cui voglio fare clic per visualizzare la finestra. Non sono sicuro di cosa significhi la seconda frase. Grazie per l'aiuto!

risposta

5

This is a sample pen demo for you. il codice HTML dovrebbe essere simile a questo:

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

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

È CSS dovrebbe essere simile a questo:

#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); 
} 

Javascript dovrebbe essere simile a questo: presumo che avete fatto riferimento lo script leanmodal nel tuo documento in testa e non ricevi errori nella console del browser.

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

Ho modificato il mio codice per assomigliare a questo, ma non riesco ancora a visualizzare il popup quando faccio clic sul pulsante. Mi manca qualcosa da includere? – user2888360

+0

@ user2888360 nella mia risposta ti ho fornito un esempio di link dimostrativo. fai clic su di esso- verifica che funzioni e quindi fai clic sull'opzione "Modifica questa penna" in basso a sinistra del tuo browser per visualizzare il codice. –

+0

@ user2888360 ignora il grande codice js che ho aggiunto nell'area js nella demo, ovvero il codice del plugin leanmodal. scorri verso il basso che è necessario utilizzare l'istruzione trigger, che è sotto la funzione ready di jquery. –

1

Prova con $ .ready (documento)() come:

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