基础 6 揭示了不为我触发的模态事件

Question

我希望在显示模态窗口中播放的视频在模态窗口关闭时停止播放（谁不呢？这很容易用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");
    });

所以感觉事件没有开火。我确定是这样，但是如何捕获它？

Answer 1

如果没有一些挖掘，Foundation 6 的魔力并不是显而易见的。 使用版本 6.2.3

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

Answer 2

看起来好像你使用的是基础 5 的回调，而不是基础 6...

对于您的回调，我建议使用"closed.zf.reveal"，"open.zf.reveal"或"closeme.zf.reveal"，如下所述：

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

Answer 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);
}