Допомога у програмуванні, відповіді на питання / Фундамент Zurb / Фонд Zurb Foundation 5 показує, що модальні не працюють - zurb-foundation

Фонд Zurb Foundation 5 показує, що модальні не працюють - zurb-foundation

Я намагаюся використати фундамент zurb 5, що відкриває модаль. Але це не працює і не відкривається, коли я натискаю кнопку. Я використовую цей HTML-код.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch.  It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">&#215;</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$("#myModal").foundation();
</script>
</body>
</html>

Відповіді:

11 за відповідь № 1

Змініть останній тег сценарію на це:

<script type="text/javascript">
$(document).foundation();
</script>

0 для відповіді № 2

Ви також забули додати модальний тригер:

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

Дивіться документацію тут: http://foundation.zurb.com/docs/components/reveal.html

-1 для відповіді № 3

Його роботи для мене

<a href="#" data-reveal-id="myModal" id="dd">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal"  data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<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>
<a class="close-reveal-modal">&#215;</a>
</div>

в нижньому колонтитулі я використав цей фрагмент

<script>
jQuery(document).ready(function(){
jQuery(document).foundation();
jQuery("#dd").click(function(){
jQuery("#myModal").foundation("reveal", "open");
});


});

</script>