Um problema com a caixa de diálogo jquery ao usar o themeroller css

Question

Sep 05, 2008, 01:55 PM

Um problema com a caixa de diálogo jquery ao usar o themeroller css

odemos para o diálogo jquery ui, todos usam o tema "flora". Como eu queria um tema personalizado, usei o themeroller para gerar um arquivo css. Quando o usei, tudo parecia estar funcionando bem, mas depois descobri que não consigo controlar nenhum elemento de entrada contido na caixa de diálogo (ou seja, não é possível digitar em um campo de texto, não é possível marcar as caixas de seleção). Uma investigação mais aprofundada revelou que isso acontece se eu definir o atributo de diálogo "modal" como true. Isso não acontece quando eu uso o tema flora.

Aqui está o arquivo 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);

Aqui está o html que usa o 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>

Aqui está o html que usa o tema themeroller baixado:

<!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 você pode ver, apenas os nomes de arquivo e classe css referenciados são diferentes. Alguém tem uma idéia do que poderia estar errado?

@ David: Eu tentei, e não parece funcionar (nem no FF ou no IE). Eu tentei css inline:

style="z-index:5000"

e eu também tentei fazer referência a um arquivo css externo:

#SERVICE03_DLG{z-index:5000;}

Mas nenhum desses trabalhos. Estou faltando alguma coisa no que você sugeriu?

Editar:
Resolver por brostbeef!
Desde que eu originalmente usava flora, assumi, por engano, que precisava especificar um atributo de classe. Acontece que isso só é verdade quando você realmente usa o tema flora (como nas amostras). Se você usar o tema customizado, especificar um atributo de classe causa esse comportamento estranho.