Show Output
<!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 JavaScript</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { // Passing option var myModal = new bootstrap.Modal(document.getElementById("myModal"), { keyboard: false }); // Show modal var btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { myModal.show(); }); }); </script> </head> <body> <div class="m-4"> <!-- Button HTML (to Trigger Modal) --> <button type="button" id="myBtn" class="btn btn-lg btn-primary">Launch 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> Press Tab key on the keyboard to enter inside the modal window after that press the Esc key. By default keyboard option is true that means modal hide on the press of escape key.</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>
