jQuery UI模式对话框捕获所有按键,因此我无法在其中输入文本

Question

我创建了带有表单的模态对话框(带有一些文本输入).我只是无法在文本框中输入文本.对话框阻止键盘输入.

这是我的简化示例:

<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>

注意:您可能会问 - 为什么我提到了"position:relative; z-index:1"？因为它没有它工作正常.但由于设计,我无法删除它.

注意:非模态对话框也可以正常工作.

我正在使用jQuery 1.6.2 + jQuery UI 1.8.14

Answer 1

z-index是问题所在.这是你的代码的一个例子(http://jsfiddle.net/c3BPP/),它有一个更大的z-index,它可以工作.

Answer 2

您还可以降低JQuery对话框的z-index:

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

默认情况下,它是1000.当然,需要文本输入的相对或绝对定位元素仍然需要大于对话框的z-index.