Question

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

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

但这只适用于通过单击灰色区域或单击Firefox中的关闭按钮来关闭模式。但是每当我尝试通过ESC键关闭模态时，我的脚本就会运行。我不想禁用ESC键来关闭bootstrap模式。有什么解决方案可以通过在Firefox的bootstrap中按下escape来检测关闭模式吗？

您可以查看样本 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>

通过ESC键将函数绑定到Bootstrap Modal Close

2 个答案: