通过 ESC 键将函数绑定到引导模式关闭

Question

我知道我们可以将一个函数绑定到引导模式，用于关闭事件，如下所示：

$("#myModal").on('hide.bs.modal', function(){ 
    //run the script
});

但这仅在您通过单击灰色区域或单击 Firefox 中的关闭按钮关闭模式时才有效。但是，每当我尝试通过 ESC 键关闭模式时，我的脚本都会运行。我不想禁用 ESC 键来关闭引导模式。是否有任何解决方案可以通过在 Firefox 中的引导程序中按 esc 来检测关闭模式？

您可以检查样品 jsfiddle 在这里。在此示例中，在Firefox中，如果您在模式中播放YouTube视频并通过按转义关闭模式，则视频不会停止，但是如果您单击关闭按钮或单击灰色区域，则关闭功能可以正常工作并清除iframe src，因此视频停止。

Answer 1

在下面输入代码以表示模态的关闭事件。它也可以与esc按钮一起使用。

$("#myModal").on('hide.bs.modal', function(){
     setTimeout(function(){
    $("#cartoonVideo").attr('src','');
    });    
});

这是这方面的小提琴。

Answer 2

经过无数次来回，我想出了这个，所以我想我会把它添加为另一种可能的解决方案。 使用模态创建和销毁 iframe。 我以前在 Firefox 上见过这样的行为，发现setTimeout()有时有效，有时行为不一致。 使用此方法，您可以保证真正清除<iframe>：

$(document).ready(function() {
  $("#myModal").on('hide.bs.modal', function() {
    $("#cartoonVideo").remove();
  });
  $("#myModal").on('show.bs.modal', function() {
    $('#myModal .modal-body').html('<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
  <!-- Button HTML (to Trigger Modal) -->
  <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
  <!-- Modal HTML -->
  <div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">YouTube Video</h4>
        </div>
        <div class="modal-body">
        </div>
      </div>
    </div>
  </div>
</div>