0

the model popup gets closed when I press space or enter key from the keyboard. I am using data-backdrop="static" data-keyboard="false" but still it is closing. I have also not used the form tag in the popup.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#keyboardModal">
  Launch demo modal
</button>
<div
  class="modal fade"
  id="keyboardModal"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog modal-dialog-centered modal-lg-override">
    <div class="modal-content">Content</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
Vivek Kumar Shukla
  • 191
  • 1
  • 11
  • Could you check this answer https://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing/25159755#25159755 – Momin Jul 02 '20 at 07:55
  • hi, your code is working perfect, the issue your getting is if only you click the modal button and before clicking somewhere in the page if you press enter or space your button is getting triggered so your modal is getting close and opening back. – CodeBug Jul 02 '20 at 08:23
  • I got your point but not getting how to fix it. – Vivek Kumar Shukla Jul 02 '20 at 08:37

1 Answers1

1

$('#open_modal').click(function(){
$('html').bind('keydown', function(e)
{
   if(e.keyCode == 13 || e.keyCode == 32 )
   {
      return false;
   }
});
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#keyboardModal" id="open_modal">
  Launch demo modal
</button>
<div
  class="modal fade"
  id="keyboardModal"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog modal-dialog-centered modal-lg-override">
    <div class="modal-content">Content</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

hope this may help you.

CodeBug
  • 1,649
  • 1
  • 8
  • 23