Search code examples
javascriptjquerybootstrap-modal

Launch bootstrap modal on key press

I've got a modal which im launching with a button click. I was wondering what is the correct way to launch it using keyboard combination such as (ctrl+q)

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

enter image description here

I tried the following but nothing happens

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


$(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>
<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>

I can't get it to work https://jsfiddle.net/n4g3f16a/

Solution

  • You can listen to the keydown events of ctrl and Q simulatenously and show the modal

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