如何通过Ctrl+Q组合键触发Bootstrap Modal弹窗？

问题概述 #

已实现按钮点击触发Bootstrap Modal，但尝试多段键盘监听代码后，无法通过Ctrl+Q组合键触发弹窗。

用户尝试的无效代码 #

初始按钮触发代码（ID不匹配） #

$("#myBtn").click(function(){
  $("#myModal").modal();
});

无效的键盘监听代码 #

// 第一段keypress监听
$(document).bind('keypress', function(e){
    switch(e.keyCode)
    {
        case 17:
          $("#myModal").modal();
        break;
     }
});

// 两段keydown监听
$(document).keydown(function(e) {
  if (e.ctrlKey && e.keyCode == 81) {
    $('#myModal').modal('show');
  }
});

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'q') {  
    $('#myModal').modal('show');
  }
});

用户提供的HTML代码 #

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
  <h1>
    This is a modal test
  </h1>
  <!-- Button trigger modal -->
  <button class="btn btn-primary" id="input167889622004610" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> 
    Launch demo modal 
  </button>
  <!-- Modal -->
  <div tabindex="-1" class="modal fade" id="exampleModal" aria-hidden="true" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button class="btn-close" id="input167889622004629" aria-label="Close" type="button" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" id="input167889622004759" type="button" data-bs-dismiss="modal">Close</button> 
          <button class="btn btn-primary" id="input167889622004777" type="button">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

问题原因 #

1. Bootstrap版本混用：使用了Bootstrap 5的JS文件，但搭配Bootstrap 3的CSS，导致Modal组件初始化和调用逻辑不兼容。
2. ID不匹配：JS代码中引用的#myModal与HTML中实际的Modal ID#exampleModal不一致，无法定位到弹窗元素。
3. 未阻止默认行为：Ctrl+Q是部分浏览器的默认快捷键（如Chrome中为关闭窗口），未阻止默认操作会导致弹窗无法正常触发。

正确实现方案 #

完整代码 #

<html>
<head>
<!-- 统一使用Bootstrap 5资源，包含Popper的bundle版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
</head>
<body>
  <h1>
    This is a modal test
  </h1>
  <!-- Button trigger modal -->
  <button class="btn btn-primary" id="input167889622004610" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"> 
    Launch demo modal 
  </button>
  <!-- Modal -->
  <div tabindex="-1" class="modal fade" id="exampleModal" aria-hidden="true" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button class="btn-close" id="input167889622004629" aria-label="Close" type="button" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" id="input167889622004759" type="button" data-bs-dismiss="modal">Close</button> 
          <button class="btn btn-primary" id="input167889622004777" type="button">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script>
    // 保留按钮触发功能（可选）
    $("#input167889622004610").click(function(){
      $("#exampleModal").modal('show');
    });

    // Ctrl+Q触发弹窗逻辑
    $(document).keydown(function(e) {
      if (e.ctrlKey && e.key === 'q') {
        e.preventDefault(); // 阻止浏览器默认的Ctrl+Q行为
        $('#exampleModal').modal('show');
      }
    });
  </script>
</body>
</html>

关键调整说明 #

• 统一Bootstrap版本：使用Bootstrap 5的全套资源（CSS+包含Popper的JS bundle），确保组件功能兼容。
• 修正ID引用：所有JS选择器使用#exampleModal，与HTML中的Modal ID保持一致。
• 阻止默认行为：添加e.preventDefault()，避免浏览器执行Ctrl+Q的默认操作（如关闭窗口）。
• 兼容性优化：使用e.key === 'q'替代keyCode，提升代码可读性和跨浏览器兼容性。

内容的提问来源于stack exchange，提问作者David Garcia