vertical - El diálogo modal de jQuery UI captura todas las pulsaciones de tecla, por lo que no puedo ingresar texto dentro

menu jquery ui vertical

Question

Creo un diálogo modal con una forma dentro de él (con alguna entrada de texto). Y simplemente no puedo ingresar el texto dentro del cuadro de texto. Bloques de diálogo de entrada de teclado.

Aquí está mi ejemplo simplificado:

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

Nota : puede preguntar, ¿por qué mencioné sobre "position:relative; z-index:1" ? Porque funciona bien sin él. Pero no puedo quitarlo por diseño.

Nota : el diálogo no modal funciona bien también.

Estoy usando jQuery 1.6.2 + jQuery UI 1.8.14

Answer 1

Agregar tabindex="-1" me ayudó a resolver este problema.

Aquí hay un ejemplo:

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

Answer 2

El índice z es el problema. Aquí hay un ejemplo ( http://jsfiddle.net/c3BPP/ ) de su código con un índice z más grande y funciona.

Answer 3

Encontré que la etiqueta <form> en mi cuadro de diálogo estaba obteniendo un z-index de 1, lo que impide que cualquiera de los controles funcione. En lugar de cambiar el z-index para cada control, simplemente cambié el z-index de la etiqueta <form> a 1010 (un valor más alto que el valor predeterminado del diálogo) funcionó para mí.

Answer 4

También puede bajar el índice z del cuadro de diálogo JQuery:

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

Por defecto, es 1000. Por supuesto, sus elementos relativos o posicionados absolutos que necesitan entrada de texto deben ser aún mayores que el índice z del cuadro de diálogo.