Un problema con el cuadro de diálogo jquery al usar el CSS de Themeroller

StackOverflow https://stackoverflow.com/questions/45600

Pregunta

El población para el cuadro de diálogo jquery ui, todos usan el tema "flora".Quería un tema personalizado, así que usé themeroller para generar un archivo CSS.Cuando lo usé, todo parecía funcionar bien, pero luego descubrí que no puedo controlar ningún elemento de entrada contenido en el cuadro de diálogo (es decir, no puedo escribir en un campo de texto, no puedo marcar casillas de verificación).Una investigación más profunda reveló que esto sucede si configuro el atributo de diálogo "modal" en verdadero.Esto no sucede cuando uso el tema flora.

Aquí está el archivo js:

topMenu = {
    init: function(){
        $("#my_button").bind("click", function(){
            $("#SERVICE03_DLG").dialog("open");
            $("#something").focus();
        });

        $("#SERVICE03_DLG").dialog({ 
            autoOpen: false,
            modal: true, 
            resizable: false,
            title: "my title",
            overlay: { 
                opacity: 0.5, 
                background: "black" 
            }, 
            buttons: { 
                "OK": function() { 
                    alert("hi!");
                }, 
                "cancel": function() { 
                    $(this).dialog("close"); 
                } 
            },
            close: function(){
                $("#something").val("");
            }
        });
    }
}

$(document).ready(topMenu.init);

Aquí está el html que usa el tema flora:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>

<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

Aquí está el html que utiliza el tema theroller descargado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>

<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

Como puede ver, solo el archivo CSS al que se hace referencia y los nombres de las clases son diferentes.¿Alguien tiene alguna idea de lo que podría estar mal?

@David:Lo probé y no parece funcionar (ni en FF ni en IE).Probé CSS en línea:

style="z-index:5000"

y también lo probé haciendo referencia a un archivo CSS externo:

#SERVICE03_DLG{z-index:5000;}

Pero ninguno de estos funciona.¿Me estoy perdiendo algo en lo que sugeriste?

Editar:
¡Resolver por brostbeef!
Como originalmente estaba usando flora, asumí erróneamente que tenía que especificar un atributo de clase.Resulta que esto sólo es cierto cuando realmente usas el tema de la flora (como en los ejemplos).Si utiliza el tema personalizado, especificar un atributo de clase provoca ese comportamiento extraño.

¿Fue útil?

Solución

Creo que es porque tienes las clases diferentes.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (costumbre)

Incluso con el tema flora, seguirías usando la clase ui-dialog para definirlo como un diálogo.

He hecho modales antes y nunca definí una clase en la etiqueta.jQueryUI debería encargarse de eso por usted.

Intente deshacerse del atributo de clase o utilizar la clase "ui-dialog".

Otros consejos

Después de jugar con esto en Firebug, si agrega un atributo de índice z mayor que 1004 a su div predeterminado, ID de "SERVICE03_DLG", entonces funcionará.Le daría algo extremadamente alto, como 5000, sólo para estar seguro.

No estoy seguro de qué hay en el CSS del tema que causa esto.Probablemente cambiaron o descuidaron el atributo de posición del div de destino que convierte en un cuadro de diálogo.

Intenté implementar un tema de themeroller con un diálogo y pestañas y resulta que el CSS del themeroller no funciona con jQuery oficial!Especialmente para el diálogo y las pestañas, modificaron las clases de elementos de las oficiales de jquery.Mira aquí:http://filamentgroup.com/lab/introduciendo_themeroller_design_download_custom_themes_for_jquery_ui/

Comentario de un usuario:

3) El tema generado que descargué parece estar incompleto: cuando intento usarlo mis pestañas (que funcionan con el tema de la flora, código idéntico al ejemplo de documentación) no se sientan como pestañas

Después de haber encontrado 3, pensé que estaba atascado y tendría que revertir usando "Flora" ... Desde entonces, he descubierto leyendo el código fuente del archivo "demo" que si ajusto mi HTML y le doy los elementos <li> que estoy. Usando para mis pestañas la clase "UI-Tabs-Sav-Item", entonces funcionará.

El tema generado por Themeroller es, por lo tanto, desafortunadamente incompleto.Si las cosas de pestañas están incompletas, me hace preguntarme qué más está incompleto.Fue bastante frustrante.:(

seguido del comentario de los desarrolladores del temaroller:

3) Echaremos un vistazo a eso.Tienes razón en que esas clases deben ser agregadas por el complemento.Por ahora, sin embargo, probablemente no le duele mucho agregarlos a su marcado para que pueda usar temas de Themeroller.Pero lo comprobaremos.Creo que nuestros selectores podrían basarse en el selector de UI-Tabs de los padres, pero creo que estábamos tratando de no usar elementos en nuestros selectores.Considéralo en la lista de tareas pendientes

Hombre, este es bueno.Intenté hacer un montón de cosas en estas dos páginas.¿Has intentado simplemente omitir el CSS por completo y probar ambas páginas?Utilicé Firebug para eliminar el CSS del encabezado en ambas páginas, y la entrada aún funcionó en una y no en la otra, pero me inclino a creer que Firebug no elimina completamente el CSS de la representación, y usted Obtendrá resultados diferentes si realmente lo elimina del código.

También descubrí que puedes pegar texto en el cuadro de texto usando el mouse; simplemente no acepta la entrada del teclado.Sin embargo, no parece haber ningún controlador de eventos que pueda interferir con esto.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top