Question

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

但我无法弄清楚如何让它在回调中发挥作用。模态窗口本身按预期运行。这有效：

$('.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

如果没有一些挖掘，基金会6的魔力并不是很明显。使用版本6.2.3

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

Answer 2

好像你正在使用Foundation 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);
}

基金会6揭示了不向我开火的模态事件

3 个答案: