Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Avoid modal dismiss on enter keypress

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.

like image 220
Luke Morgan Avatar asked May 01 '12 15:05

Luke Morgan


People also ask

How do I stop data dismissal modal?

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.

How do you trigger a modal with a button?

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.

What is data dismiss 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.

What is modal toggle?

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"); }); });


2 Answers

I just had this problem too.
My problem was that i had a close button in my modal

<button class="close" data-dismiss="modal">&times;</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">&times;</a> 

Without seeing your source, I can't confirm that your cause is the same though.

like image 133
vish Avatar answered Sep 22 '22 07:09

vish


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> 
like image 42
jcalonso Avatar answered Sep 22 '22 07:09

jcalonso