Foundation 6 揭示了不为我触发的模态事件答案

【问题标题】：Foundation 6 reveal modal events not firing for meFoundation 6 揭示了不为我触发的模态事件
【发布时间】：2016-03-13 15:32:06
【问题描述】：

我希望在模式窗口关闭时，在显示模式窗口中播放的视频停止播放（谁不会？）。这很容易通过 jQuery 将 iframe 源设置为空来完成。

但我不知道如何让它在回调中工作。模态窗口本身按预期运行。这有效：

$('.close-button', '#video-reveal').on('click', function() {
      $('#video-player').attr("src", "");
       console.log("button event fired");
 });

但是，以下都没有任何效果：

  // from documentation
    $(document).on('close.fndtn.reveal', '[data-reveal]', function() {
        var modal = $(this);
        console.log("closing reveal event fired");

    }); 
    // my attempt to do it programmatically
    $('[data-reveal]').on ('opened.fndtn.reveal', function() {
        var modal = jQuery(this);
        console.log("opened reveal");

    });

所以感觉事件没有触发。我确定是，但是如何捕获呢？

【问题讨论】：

标签： zurb-foundation-6 zurb-reveal

【解决方案1】：

Foundation 6 的魔力并非一目了然。使用版本 6.2.3

$(document).on(
  'open.zf.reveal', '[data-reveal]', function () {
    console.log("'open.zf.Reveal' fired.");
  }
);

【讨论】：

【解决方案2】：

您似乎使用的是 Foundation 5 的回调，而不是 Foundation 6...

对于您的回调，我建议使用此处提到的“closed.zf.reveal”、“open.zf.reveal”或“closeme.zf.reveal”：

http://foundation.zurb.com/sites/docs/reveal.html

【讨论】：

多哈。谢谢。我不知道我是如何被转移到那个 Fdn 5 文档中的——我在其他所有方面都使用了 Foundation 6 文档 :-( 不知道我可能会迷惑多久（或者只是忘记了）。我在其他 Foundation JS 的东西中也看到了“closed.zf”风格的事件跟踪。Sheesh。
嘿，我很高兴能帮上忙！

【解决方案3】：

在 HTML 中

<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
    <div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
        <h2>This modal has video</h2>
        <div class="flex-video">
        <iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
    </div>
        <button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

<!--in apps.js-->

function destroyVideo(){
    var url = $('#youtubePlayer').attr('src');
    $('#youtubePlayer').attr('src', '');
    $('#youtubePlayer').attr('src', url);
}

【讨论】：