1

Foundation Reveal を使用してモーダルを作成しようとしたときに、それを閉じることができないことがわかりました。javascriptではなく、reveal-modal-closeクラスを使用しても、何も機能していませんでした。

この例をドキュメントからページに入れようとしました:

<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>
4

1 に答える 1

0

foundation.min とfoundation.reveal の両方をロードする必要はありません。明らかにする必要がある場合を除き、min をロードするだけです。また、 modal.js は必要ありません-そこで競合する可能性があります。

こちらのドキュメントを参照してそれに従ってください。上記の問題を修正すると動作するはずです: http://foundation.zurb.com/docs/components/reveal.html

于 2014-12-28T09:05:48.923 に答える