Menu
In a shown modal there is a form. If I focus on an input field (any field for that matter) and press ESC key, that modal is hidden. However, if I don't focus on a form field, then pressing ESC key does not close the modal. What's going on?
I want to disable ESC key functionality for the modals altogether. I tried this:
$(document).on('keypress', function(e) { if(e.keyCode == 27) { e.preventDefault(); return false; } } But this does not affect anything. Is there a way to completely disable ESC key for modals?
542
Modal Options This modal can be closed with the escape key on your keyboard. Note: You need to press the tab key on the keyboard to first enter the modal window, and then press the Esc key.
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
Typically, when you hit the ESC key, that closes a modal. But if this modal contains a form that the user needs to fill out, that would mean that hitting ESC (sometimes, inadvertently) closes the modal and they lose all the information they just provided in the form.
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
By adding data-keyboard="false" fixes the problem.
Something like this: <div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
161
Twitter's Bootstrap modal.js (see http://getbootstrap.com/2.3.2/javascript.html#modals) itself has keyboard true or false Boolean. You can avoid escape keypress and click outside the modal using following script:
$(function () { $('.modal').modal({ show: true, keyboard: false, backdrop: 'static' }); }); working demo :
$(function () { $('.modal').modal({ show:true, keyboard: false, backdrop: 'static' }); }); <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <div class="modal" id="exampleModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
