1

在尝试使用 Foundation Reveal 创建模式时，我发现我无法关闭它。不是通过使用reveal-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>
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 回答