2015-11-22 24 views
8

Ho scaricato il nuovo pacchetto completo Zurb Foundation 6 (Foundation for Sites). Il file archiviato contiene i seguenti file e cartelle:Zurb Foundation 6 Reveal non funziona

[css] > app.css, foundation.css, foundation.min.css 
[img] > [empty folder] 
[js] > 
    app.js 
    foundation.js 
    foundation.min.js 
    vendor > jquery.min.js, what-input.min.js 

Ho incluso il file JS nel piè di pagina e il CSS l'intestazione:

<!-- foundation library and initialization --> 
<script src="/Foundation/js/foundation.min.js"></script> 
<script> 
    $(document).foundation(); 
</script> 

Errore in Chrome

provo utilizzare il componente REVEAL (ha funzionato in Foundation 5), ma questa volta mi viene visualizzato un errore:

Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for i. 

Ho guardato dentro il Foundation.min.js e ci ha REVEAL in esso. Scarico il pacchetto completo, quindi dovrebbe funzionare, ma non è così.

Il codice JS che dovrebbe far scattare il modal:

$('#submit-modal').foundation('reveal', 'open'); 

UPDATE 1: Provato su una pagina nuova:

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="/Foundation/css/foundation.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="row">this is the body of the page</div> 
    <div id="popup-modal" class="reveal-modal full" data-reveal aria-labelledby="pop-up-modal-title" aria-hidden="true" role="dialog"> 
     test 
    </div> 

<script src="/Foundation/js/vendor/jquery.min.js"></script> 

<!-- foundation library and initalization --> 
<script src="/Foundation/js/vendor/what-input.min.js"></script> 
<script src="/Foundation/js/foundation.js"></script> 

<script> 
    $(document).foundation(); 
</script> 

</body> 
</html> 

Il testo del popup apparso sulla prima pagina, non è nemmeno nascosto per impostazione predefinita e viene visualizzato un messaggio di errore: Uncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Reveal quando si tenta di eseguire il comando:

$('#popup-modal').foundation('reveal', 'open'); 

Dalla console.

Il Foundation 6 è un nuovo rilascio, e io; ve potrebbe mancare qualcosa. Sono passato a Foundation 6 dalla Foundation 5. Foundation 5 Reveal ha funzionato bene, ma dopo il passaggio alla nuova Foundation 6 alcuni componenti iniziano a non funzionare.

Ho controllato la documentazione e l'inizializzazione e le classi sono le stesse.

risposta

26

Prova con

var popup = new Foundation.Reveal($('#popup-modal')); 

e poi:

popup.open(); 

Non sono sicuro se $('#popup-modal').foundation('reveal', 'open'); opere in Fondazione 6

+0

Sì, e hanno anche cambiato la classe in "rivelare" invece di "rivelare-modale". Funziona, grazie! –

+1

infatti non funzionerà. La firma di foundation come estensione jQuery è cambiata in prendendo il primo argomento come plug-in e i parametri rest in opzioni al plugin: https://github.com/zurb/foundation-sites/blob/develop/js/foundation .core.js # L250: L284 –

+0

Funziona per me come un fascino. Grazie! – Combine

16

Chris da ZURB qui. Ci sono un paio di modi in cui è possibile richiamare i metodi sui plugin, si veda: http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

Il modo più semplice ora è $('#exampleModal').foundation('open')

+0

Grazie per la risposta aggiuntiva, entrambi funzionano. –

+1

Come si aggiunge il modale a un elemento radice in Foundation 6 invece del corpo – user1801879

+0

Ho riscontrato lo stesso problema. Penso che sia stato, che la ricerca su Internet si riferisse direttamente alla documentazione di rivelazione dalla fondazione 5, non 6. – nodepond

2

Entrambe le opzioni fornite dal Juliancwirko & EddieDean stanno lavorando. Ma c'è una differenza.

Se si utilizza l'approccio "nuova Fondazione" e si hanno anche data-opzioni insieme come: data-options = "closeOnEsc: false; closeOnClick: false;" non avranno alcun effetto.

Ma se si utilizza il fondotinta ('aperto') funzioneranno.