El demos para el diálogo jquery ui utiliza 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 más tarde 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 las casillas de verificación). Investigaciones posteriores revelaron que esto sucede si establezco el atributo de diálogo "modal" en verdadero. Esto no sucede cuando uso el tema de flora.Problema con el cuadro de diálogo jquery al utilizar themeroller css
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í es el HTML que utiliza el tema de la 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> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Aquí está el código HTML que utiliza el tema ThemeRoller 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> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Como puede ver, solo los nombres de clases y archivos css mencionados son diferentes. ¿Alguien tiene una pista sobre qué podría estar mal?
@David: Lo probé, y parece que no funciona (ni en FF ni en IE). Probé CSS en línea:
style="z-index:5000"
y también he intentado hacer referencia a un archivo CSS externo:
#SERVICE03_DLG{z-index:5000;}
Pero ninguno de estos trabajos. ¿Me estoy perdiendo algo de lo que sugirió?
Editar:
Resuelva por brostbeef!
Como originalmente estaba usando flora, había asumido erróneamente que tenía que especificar un atributo de clase. Resulta que esto solo es cierto cuando realmente usa el tema de flora (como en las muestras). Si usa el tema personalizado, especificar un atributo de clase provoca ese comportamiento extraño.
¿Sigues teniendo este problema? – MDCore
No estoy seguro de por qué eliminó su código y los enlaces sustituidos ... que ahora están rotos por lo que no se puede hacer referencia. – clairestreb
oops, se olvidó por completo de eso. Veré si puedo editar la publicación para recuperar el código. – Ovesh