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

user_440169 0
Viewed 13542

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 simplified example:

<div id="modal-dialog">
    <label for="my-text">TRY to input text...</label>
    <textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
    var dialog = $('#modal-dialog').dialog({ modal: true });
</script>

Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.

Note: not modal dialog works fine too.

I'm using jQuery 1.6.2 + jQuery UI 1.8.14

jquery-ui-dialog jquery-ui
4 Answers

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.

user_1311410
Related