<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Prevent Hiding Bootstrap Modal on Escape Key Press Using jQuery</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function() { // Passing option $("#myModal").modal({ keyboard: false }); // Show modal $("#myBtn").click(function() { $("#myModal").modal("show"); }); }); </script> </head> <body> <div class="m-4"> <!-- Button HTML (to Trigger Modal) --> <button type="button" id="myBtn" class="btn btn-lg btn-primary">Demo Modal</button> <!-- Modal HTML --> <div id="myModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Confirmation</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>Do you want to save changes to this document before closing?</p> <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p> <p class="text-info"><small><strong>Note:</strong> To enter the modal windows, hit the Tab key on your keyboard, then press the Esc key. By default, the keyboard's true setting indicates that the modal will hide when the escape key is pressed.</small></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </body> </html>