Question

我确定我犯了一个愚蠢的错误，但它花了我几个小时，我找不到解决问题的方法。一切似乎都好但不起作用。我正在使用Foundation 5透露。但是模态窗口没有显示。这是我的代码：

HTML

<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>

我还在body标签中包含了以下js文件：

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

提前感谢任何帮助。

Answer 1

在致电$(document).foundation();之前，请致电foundation.reveal.js。

我很确定这是因为$(document).foundation();仅启动那些已经之前指定的模块，Foundation doesn't make clear in its notes。

Foundation为您提供了自定义插件初始化的选项。默认情况下，调用$（'＃scope'）。foundation（）;将初始化页面上所有可用的插件。

Answer 2

我只是想添加这个简单的近乎裸露的模态标记，我昨晚花了近4个小时才把它弄好，我认为没有太多可以处理这些揭示模式的问题

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
<a href="#" class="button" data-reveal-id="myNormal">reveal modal</a>
<div class="reveal-modal" id="myNormal" data-reveal>
  Modal
  <a class="close-reveal-modal">close</a>
</div>
<script>
  $(document).foundation();
</script>
</body>

我希望这对未来的访客有任何帮助。

基础5模态不起作用

2 个答案: