JQuery UI modal dialog фиксирует все нажатия клавиш, поэтому я не могу вводить текст внутри него

Я создаю модальный диалог с формой внутри него (с некоторым текстовым вводом). И я просто не могу ввести текст внутри текстового поля. Диалог блокирует ввод клавиатуры.

Вот мой упрощенный пример:

<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

Ответы

Ответ 1

Задача z-индекса. Вот пример (http://jsfiddle.net/c3BPP/) вашего кода с большим z-индексом и он работает.

Ответ 2

Вы также можете опустить z-индекс в диалоговом окне JQuery:

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

По умолчанию это 1000. Конечно, ваши относительные или абсолютные позиции, требующие ввода текста, должны быть больше, чем z-индекс диалогового окна.

Ответ 3

Я обнаружил, что тег <form> в моем диалоговом окне получал z-index из 1, предотвращая работу любого из элементов управления. Вместо изменения z-index для каждого элемента управления просто изменилось значение z-index тега <form> до 1010 (значение, превышающее значение по умолчанию для диалога).

Ответ 4

Добавление tabindex="-1" помогло мне решить эту проблему.

Вот пример:

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