ファンデーション6.2.4モーダル

ファンデーション6.2.4でモーダルを実装しようとしましたが、動作しません：ファンデーション6.2.4モーダル

モーダルは非表示ですが表示できません。

コード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>RIA2-Projet</title> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="assets/foundation-icons/foundation-icons.css" /> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
</head> 

<body> 

<div class="reveal" id="exampleModal1" data-reveal> 
    <h1>Awesome. I Have It.</h1> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
    <button class="close-button" data-close aria-label="Close modal" type="button"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
</div> 

<p><a data-open="exampleModal1">Click me for a modal</a></p> 

</body> 
</html>

編集：私は置く私のapp.jsファイルにした場合：

$(document).foundation(); 
$(document).ready(function() { 
    var popup = new Foundation.Reveal($('#exampleModal1')); 
});

それは仕事だが、それは右のそれなしで仕事ができると仮定？

出典

2017-01-17 S.Martignier

財団の機能/プラグインの中には、仕事に初期化が必要になります。https://foundation.zurb.com/sites/docs/javascript.html#initializing

をあなたのコードは大丈夫ですが、$(document).foundation();はJavaScriptを/ jQueryのを使用する財団のプラグインのいずれかを実行するために必要です。

ここ$('reveal').foundation();

は、それが動作してフィドルである（最小ファイルの使用を含む）：

また、とだけモーダルを初期化することができhttps://jsfiddle.net/gbyobLt5/

出典

2017-01-17 12:15:27 tymothytym

ファンデーション6.2.4モーダル

答えて

関連する問題