Фонд Раскрыть Модал не закроется

Пытаясь создать модал с помощью Foundation Reveal, я обнаружил, что не могу его закрыть. Не используя класс show-modal-close, не используя javascript, ничего не работало.

Я попытался поместить этот пример из документации на страницу:

<div id="myModal" class="reveal-modal" 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>

Когда страница загружается, она открыта, но я не могу закрыть ее. Кроме того, не уверен, почему он загружается открытым.

Внизу моего <body>, У меня есть это:

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js">      </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>

<script>
  $(document).foundation();  
</script>
Источник

1 ответ

Вам не нужно загружать и foundation.min, и foundation.reveal, просто загрузите min, если вам нужно только открыть. Также вам не нужен modal.js - там может быть конфликт.

См. Документацию здесь и следуйте ей, она должна работать после устранения вышеуказанных проблем: http://foundation.zurb.com/docs/components/reveal.html

Источник
Другие вопросы по тегам