Foundation 6 揭示模态事件没有为我触发

Question

我希望在显示模态 window 中播放的视频在模态 window 关闭时停止播放（谁不关闭？）。通过将 iframe 源设置为空，可以使用 jQuery 轻松完成此操作。

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

$('.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 5 的回调，而不是 Foundation 6...

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

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

Answer 2

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

Answer 3

如果不进行一些挖掘，Foundation 6 的魔力并非一目了然。使用版本 6.2.3

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

Foundation 6 揭示模态事件没有为我触发

Foundation 6 reveal modal events not firing for me

zurb-reveal

zurb-foundation-6