Bootstrap 4嵌入YouTube视频的模态框Esc键关闭失效求助

云上老周

2026-7-26

解决Bootstrap 4模态框嵌入YouTube视频后Esc键无法关闭的问题

问题原因

当与iframe内的YouTube播放器交互后，页面焦点会转移到iframe内部文档中，此时Esc键的键盘事件被iframe捕获，无法冒泡到父页面的Bootstrap模态框，导致原本设置的data-keyboard="true"失效。

解决方案：全局监听Esc键事件

在父页面添加全局键盘事件监听，当模态框处于显示状态时，捕获Esc键并手动触发关闭操作。

修改你的jQuery代码，新增以下监听逻辑：

// 全局监听Esc键，手动关闭模态框
$(document).on('keydown', function(e) {
  // 检查模态框是否显示，且按下的是Esc键
  if ($('#modalVideo').hasClass('show') && e.key === 'Escape') {
    $('#modalVideo').modal('hide');
  }
});

完整整合代码

最终的jQuery代码如下：

var src_culture="https://www.youtube.com/embed/someVideo_x?autoplay=1&enablejsapi=1";

// 模态框隐藏时重置iframe
$('#modalVideo').on('hidden.bs.modal', function (e) {
  $('#modalVideo iframe').attr("src", "");
  $("body").css("padding-right","0");
});

// 模态框显示时加载视频
$("#modalVideo").on('shown.bs.modal', function(){
  $('#modalVideo iframe').attr('src', src_culture);
  $("body").css("padding-right","0");
});

// 全局监听Esc键关闭模态框
$(document).on('keydown', function(e) {
  if ($('#modalVideo').hasClass('show') && e.key === 'Escape') {
    $('#modalVideo').modal('hide');
  }
});