I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed. Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
data-dismiss="modal" is bootstrap's way to dismiss a modal window. <button data-dismiss="modal" class="btn btn-primary" ng-click="AddWidget(SizeX,SizeY,Row,Column)">Add Widget</button> Individually data-dismiss works to close modal window.
modal(“toggle”) method in Bootstrap to toggle the modal. As shown below, the modal generates on the click of a button − $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
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