Un problème avec le jquery boîte de dialogue lors de l'utilisation de la themeroller css

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

Question

L' les démos pour le jquery ui dialog utilisent tous le "flore" thème.Je voulais un thème personnalisé, j'ai donc utilisé le themeroller pour générer un fichier css.Lorsque je l'ai utilisé, tout semble fonctionner très bien, mais plus tard, j'ai constaté que je ne peux pas contrôler tout élément d'entrée figurant dans la boîte de dialogue (j'.e, ne peut pas taper dans un champ de texte, ne peut pas vérifier, cases à cocher).Une enquête ultérieure a révélé que ce qui se passe si j'ai mis la boîte de dialogue de l'attribut "modal" à true.Cela ne se produit pas lorsque j'utilise le thème de la flore.

Voici le fichier 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);

Voici le code html qui utilise la flore thème:

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

Voici le code html qui utilise le téléchargé themeroller thème:

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

Comme vous pouvez le voir, seulement référencé dans la css de fichiers et les noms de classe sont différents.Quelqu'un a une idée de ce qui pourrait être mauvais?

@David:Je l'ai essayé, et il ne semble pas fonctionner (ni sur FF ou IE).J'ai essayé css:

style="z-index:5000"

et j'ai aussi essayé le référencement d'un fichier css externe:

#SERVICE03_DLG{z-index:5000;}

Mais aucune de ces travaux.Ai-je raté quelque chose dans ce que vous avez suggéré?

Edit:
Résoudre par brostbeef!
Depuis que je suis à l'origine à l'aide de la flore, j'ai eu le tort que j'ai pour spécifier un attribut de classe.S'avère, ce n'est vrai que lorsque vous utilisez le thème de la flore (comme dans les exemples).Si vous utilisez le thème personnalisé, en spécifiant un attribut de classe causes de cet étrange comportement.

Était-ce utile?

La solution

Je pense que c'est parce que vous avez les classes différentes.
<div id="SERVICE03_DLG" class="flora"> (flore)
<div id="SERVICE03_DLG" class="ui-dialog"> (personnalisé)

Même avec le thème de la flore, vous devrez utiliser l'interface utilisateur-classe de boîte de dialogue définir comme une boîte de dialogue.

J'ai fait des modaux avant et je n'ai jamais défini une classe à la balise.jQueryUI devrait prendre soin de cela pour vous.

Essayer de se débarrasser de l'attribut de classe ou à l'aide de la "ui-dialog" de la classe.

Autres conseils

Après la lecture de ce dans Firebug, si vous ajoutez un z-index de l'attribut plus de 1004 par défaut de votre div id de "SERVICE03_DLG", alors il va travailler.J'aimerais lui donner quelque chose d'extrêmement haute, comme 5000, juste pour être sûr.

Je ne suis pas sûr de ce qu'il est dans le themeroller CSS qui provoque cela.Ils ont probablement changé ou négligé la position de l'attribut de la cible div qu'il se transforme en une boîte de dialogue.

J'ai essayé de mettre en œuvre une themeroller avec un thème de dialogue et d'onglets et il s'avère que le themeroller CSS ne fonctionne pas avec officiel de jQuery!Surtout pour le dialogue et les onglets, ils ont modifié l'élément de classes à partir de l'officiel de jquery ceux.Voir ici:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

Le commentaire d'un utilisateur:

3) générés thème que j' téléchargé semble être incomplètes lorsque j'essaie d'utiliser mes onglets (qui fonctionnent avec le thème de la flore, du code identique à la documentation exemple) n'obtiennent pas de style sous forme d'onglets

Avoir couru en 3 j'ai pensé que j'étais coincé et aurait pour revenir à l'aide de “flore"... depuis, j'ai découvert par la lecture du code source de la “démo” fichier que si je adapter mon code html et donner l' < li> les éléments que j'utilise pour mes onglets la “ui-tabs-nav-item” classe alors il va travailler.

Le thème généré par themeroller est donc malheureusement incomplète.Si l' onglets des choses est incomplète, elle me fait me demande quoi d'autre est incomplet.Il était plutôt frustrant.:(

suivi par le themeroller développeurs commentaire:

3) Nous allons jeter un oeil à ce.Vous avez raison, ces classes doit être ajouté par le plugin.Pour l'instant, cependant, il est probablement ne serait pas fait beaucoup de mal à simplement les ajouter à votre balise de sorte que vous pouvez utiliser themeroller thèmes.Nous allons le vérifier, si.Je pense que nos sélecteurs pourrait être grâce à l'interface parent-onglets sélecteur de la place, mais je pense que nous avons essayé de ne pas utiliser les éléments dans nos sélecteurs.Envisager sur la liste à faire

L'homme, c'est une bonne idée.J'ai essayé de faire un tas de choses sur ces deux pages.Avez-vous essayé en laissant les CSS complètement et d'essayer les deux pages alors?J'ai utilisé Firebug pour enlever le CSS dans l'en-tête sur les deux pages, et l'entrée toujours travaillé sur l'un et pas sur l'autre, mais la, je suis enclin à croire que Firebug ne pas supprimer complètement le CSS de la prestation, et vous obtiendrez des résultats différents si vous le supprimer à partir du code.

J'ai aussi trouvé que vous pouvez coller le texte dans la zone de texte à l'aide de la souris: il suffit de ne pas accepter la saisie au clavier.Il ne semble pas être n'importe quel gestionnaire d'événement qui pourrait interférer avec cela, cependant.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top