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

Question

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

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

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

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

Answer 1

为您的模式的关闭事件添加下面的代码。它也适用于 esc 按钮。

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

这是fiddle。

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>