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

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

Pergunta

O demonstrações para a caixa de diálogo jquery ui, todos usam o tema "flora".Eu queria um tema customizado, então 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 consigo digitar em um campo de texto, não consigo 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 verdadeiro.Isso não acontece quando 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 o arquivo CSS referenciado e os nomes das classes são diferentes.Alguém tem alguma idéia do que poderia estar errado?

@David:Eu tentei e parece não funcionar (nem no FF nem no IE).Eu tentei CSS embutido:

style="z-index:5000"

e também tentei referenciar um arquivo CSS externo:

#SERVICE03_DLG{z-index:5000;}

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

Editar:
Resolva por brostbeef!
Como eu estava originalmente usando flora, presumi erroneamente que deveria 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 causará esse comportamento estranho.

Foi útil?

Solução

Acho que é porque você tem aulas diferentes.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (personalizado)

Mesmo com o tema flora, você ainda usaria a classe ui-dialog para defini-lo como um diálogo.

Já fiz modais antes e nunca defini uma classe na tag.jQueryUI deve cuidar disso para você.

Tente se livrar do atributo class ou usar a classe "ui-dialog".

Outras dicas

Depois de brincar com isso no Firebug, se você adicionar um atributo z-index maior que 1004 ao seu div padrão, id de "SERVICE03_DLG", ele funcionará.Eu daria algo extremamente alto, como 5.000, só para ter certeza.

Não tenho certeza do que há no CSS do themeroller que causa isso.Eles provavelmente mudaram ou negligenciaram o atributo position do div alvo que ele transforma em uma caixa de diálogo.

Eu tentei implementar um tema themeroller com uma caixa de diálogo e guias e descobri que o CSS themeroller não funciona com jQuery oficial!Especialmente para caixas de diálogo e guias, eles modificaram as classes de elementos das classes oficiais do jquery.Veja aqui:http://filamentgroup.com/lab/introduzindo_themeroller_design_download_custom_themes_for_jquery_ui/

Comentário de um usuário:

3) O tema gerado que eu baixei parece estar incompleto - quando tento usá -lo minhas guias (que funcionam com o tema da flora, o código idêntico ao exemplo de documentação) não é estilizado como guias

Tendo encontrado 3, pensei que estava preso e teria que reverter usando "Flora" ... Desde então, descobri lendo o código -fonte do arquivo "Demo" que, se eu ajustar meu html e dar os itens <li>, sou Usando para minhas guias a classe "UI-Tabs-NAV-Item", ele funcionará.

O tema gerado pelo Themeroller é, portanto, infelizmente incompleto.Se o material do Tabs estiver incompleto, isso me faz pensar no que mais está incompleto.Foi bastante frustrante.:(

seguido pelo comentário dos desenvolvedores do themeroller:

3) Vamos dar uma olhada nisso.Você está certo de que essas aulas devem ser adicionadas pelo plug -in.Por enquanto, provavelmente não dói muito adicioná -los à sua marcação para que você possa usar os temas do TheRoller.Vamos verificar, no entanto.Eu acho que nossos seletores podem se basear no seletor de interface do usuário pai, mas acho que estávamos tentando não usar elementos em nossos seletores.Considere isso na lista de tarefas

Cara, essa é boa.Eu tentei fazer um monte de coisas nessas duas páginas.Você já tentou deixar o CSS de fora e tentar as duas páginas?Usei o Firebug para remover o CSS do cabeçalho em ambas as páginas, e a entrada ainda funcionou em uma e não na outra - mas estou inclinado a acreditar que o Firebug não remove completamente o CSS da renderização, e você obterá resultados diferentes se você realmente removê-lo do código.

Também descobri que você pode colar texto na caixa de texto usando o mouse - ele simplesmente não aceita entrada do teclado.No entanto, não parece haver nenhum manipulador de eventos que possa interferir nisso.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top