zurb-foundation-6 - Foundation 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

看起来好像您使用的是 Foundation 5 的回调，而不是 Foundation 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);
}