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是问题所在。以下是具有更大z-index的代码示例（http://jsfiddle.net/c3BPP/），它可以正常工作。

Answer 2

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

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

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

Answer 3

我发现对话框中的<form>标记的z-index为1，阻止了任何控件的工作。只需将z-index标记的z-index更改为1010（高于对话框默认值的值），而不是更改每个控件的<form>。

Answer 4

添加tabindex="-1"帮我解决了这个问题。

以下是一个例子：

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

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

4 个答案: