通过ESC键将函数绑定到Bootstrap Modal Close-Java 学习之路

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

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

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

您可以查看样本jsfiddle here . 在这个例子中在Firefox中如果你在模态中播放YouTube视频并通过按下转换关闭模式，视频不会停止，但如果你点击关闭按钮或点击灰色区域，那么关闭功能正常工作并清除iframe src所以视频停止了 .

2 回答

将以下代码放在模态的近似事件中 . 它也适用于esc按钮 .

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

这是fiddle .

回复于 2024-04-29T11:18:57+08:00

在经历了无数次来回之后，我想出了这一点，以至于我之前看到过这样的行为，并且发现 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>

回复于 2024-04-29T11:18:57+08:00

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

2 回答

相关问题