Zurb Foundation 6 Révéler ne fonctionne pas

J'ai téléchargé la nouvelle Zurb Foundation 6 package complet (de la Fondation pour les Sites). L'archive contient les fichiers et dossiers suivants:

[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

J'ai inclus le fichier JS dans le pied de page et le CSS dans l'en-tête:

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

Erreur dans Chrome

J'essaie d'utiliser RÉVÉLER composante (il a travaillé à la Fondation 5), mais cette fois, il me lance une erreur:

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

J'ai regardé à l'intérieur du Foundation.min.js et il a RÉVÉLER. J'ai télécharger le package complet, donc cela devrait fonctionner, mais il ne le fait pas.

Le code JS qui doit déclencher l'modal:

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

Mise à JOUR 1: Essayé sur une nouvelle page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/Foundation/css/foundation.min.css"  />
</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>

Le texte de la popup est apparu sur la page, c'est même pas caché par défaut, et j'obtiens une erreur: Uncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Reveal lorsque vous essayez d'exécuter la commande:

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

À partir de la console.

Fondation 6 est un communiqué de frais, et j'ai peut manquer de quelque chose. J'ai mis à la Fondation 6 de la Fondation 5. La fondation 5 le jeu a fonctionné, mais après le passage à la nouvelle Fondation 6 certains composants de démarrage ne fonctionne pas.

J'ai vérifié la Documentation et de l'initialisation et les classes sont les mêmes.

OriginalL'auteur Idan Shechter | 2015-11-22

  1. 28

    Essayer avec 

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

    et puis:

    popup.open();

    Je ne suis pas sûr si $('#popup-modal').foundation('reveal', 'open'); travaux de Fondation 6

    Yep, et aussi ils ont changé la classe de "révéler" au lieu de "révéler modal'. Fonctionne, merci!
    en effet, il ne fonctionnera pas. La signature de la fondation jQuery extension a changé pour prendre le premier argument est le plugin, et le reste des paramètres, comme les options du plugin: github.com/zurb/foundation-sites/blob/develop/js/...
    Il fonctionne pour moi comme un charme. Merci!
    Vous êtes mon héros! merci
    Wow! Merci! Fonctionne parfaitement ici!

    OriginalL'auteur juliancwirko

  2. 16

    Chris de ZURB ici. Il y a un couple de façons dont vous pouvez appeler des méthodes sur les plugins, voir:
    http://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

    Le moyen le plus facile est maintenant

    $('#exampleModal').foundation('open')

    Merci pour la réponse supplémentaire, à la fois le travail.
    Comment voulez-vous ajouter modale d'un élément racine dans la fondation de 6 au lieu de corps
    J'ai rencontré le même problème. Je pense que c'était, que la recherche sur internet référencé directement à l'révéler la documentation de la fondation 5, pas 6.
    avez-vous jamais obtenir une réponse à votre question "Comment voulez-vous ajouter modale d'un élément racine dans la fondation de 6 au lieu de corps?". Je suis perplexe par cette. Parfois, le contenu doit être à l'intérieur d'un autre élément, surtout si vous voulez qu'il soit partie d'un plugin jQuery!

    OriginalL'auteur EddieDean

  3. 3

    Les deux options offertes par Juliancwirko & EddieDean de travail. Mais il y a une différence.

    Si vous utilisez "nouvelle Fondation" approche et vous avez également de données-options définir comme: les données-options="closeOnEsc: false; closeOnClick: false;" ils n'auront pas d'effet.

    Mais si vous êtes à l'aide de la fondation ("ouvert").

    OriginalL'auteur adelineu