javascript - Foundation 4 Reveal 不起作用？

Question

页面：http ://www.bureauforgood.com/RSTR-IA-2B/1.1-Home-Modal.html

在正文标签的末尾附近，我有以下内容：

 <script src="javascripts/jquery.js"></script>
  <script src="javascripts/foundation4.min.js"></script>
<script src="javascripts/foundation.reveal.js"></script>

（请注意，我将 js 文件的名称更改为“foundation4”。此更改工作正常，我知道这一点，因为 Orbit 正在工作）

紧随其后的是

<div id="myModal" class="reveal-modal">
  <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>
  <div class="reveal-modal-bg" style="display: none"></div>
  <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

然后是我的结束正文和 html 标签。

（出于测试目的，我将按钮放在页面底部，在页脚下方）

在我的 CSS 文件中，我确保它已包含在内（Foundation 附带的所有与 Reveal 相关的 CSS）

.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  background: rgba(0, 0, 0, 0.45);
  z-index: 98;
  display: none;
  top: 0;
  left: 0; }

.reveal-modal {
  visibility: hidden;
  display: none;
  position: absolute;
  left: 50%;
  z-index: 99;
  height: auto;
  margin-left: -40%;
  width: 80%;
  background-color: white;
  padding: 1.25em;
  border: solid 1px #666666;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  top: 50px; }
  .reveal-modal .column,
  .reveal-modal .columns {
    min-width: 0; }
  .reveal-modal > :first-child {
    margin-top: 0; }
  .reveal-modal > :last-child {
    margin-bottom: 0; }
  .reveal-modal .close-reveal-modal {
    font-size: 1.375em;
    line-height: 1;
    position: absolute;
    top: 0.5em;
    right: 0.6875em;
    color: #aaaaaa;
    font-weight: bold;
    cursor: pointer; }

@media only screen and (min-width: 768px) {
  .reveal-modal {
    padding: 1.875em;
    top: 6.25em; }
    .reveal-modal.tiny {
      margin-left: -15%;
      width: 30%; }
    .reveal-modal.small {
      margin-left: -20%;
      width: 40%; }
    .reveal-modal.medium {
      margin-left: -30%;
      width: 60%; }
    .reveal-modal.large {
      margin-left: -35%;
      width: 70%; }
    .reveal-modal.xlarge {
      margin-left: -47.5%;
      width: 95%; } }
@media print {
  .reveal-modal {
    background: white !important; } }

但是插件不起作用！有任何想法吗？

Answer 1

好的，解决了。我忘了包括这个

<script>
    $(document).foundation();
  </script>

Answer 2

您的任何代码都没有问题，只需确保在关闭正文标记之前始终完全包含以下代码段：

<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>

也只是一个建议，您可以在锚标签中添加一个按钮类，使其看起来更酷。像这样：

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

Answer 3

您需要包含此脚本

<script src="javascripts/foundation/foundation.reveal.js"></script>