jQuery UI modal dialog captures all keypress so I can't input text inside it

Question

I create modal dialog with form inside it (with some text input). And I just can\'t enter the text inside the textbox. Dialog blocks keyboard input.

Here is my simplifie

Answer 1

Adding tabindex="-1" helped me resolve this problem.

Here's an example:

 <div class="modal fade" tabindex="-1" id="error" role="dialog">

Answer 2

The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.

Answer 3

You can also lower the z-index of the JQuery dialog:

var dialog = $('#modal-dialog').dialog({ 
    modal: true,
    zIndex: 500
});

By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.

Answer 4

I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.