Le demos pour la boîte de dialogue jquery ui utilise le thème "flore". Je voulais un thème personnalisé, j'ai donc utilisé le themeroller pour générer un fichier css. Quand je l'ai utilisé, tout semblait fonctionner correctement, mais plus tard, j'ai trouvé que je ne peux contrôler aucun élément d'entrée contenu dans la boîte de dialogue (c'est-à-dire, ne peut pas taper dans un champ de texte, ne peut pas cocher les cases). Une enquête plus approfondie a révélé que cela se produit si je mets l'attribut de dialogue "modal" à true. Cela n'arrive pas lorsque j'utilise le thème de la flore.Un problème avec la boîte de dialogue jquery lors de l'utilisation du camescope
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 le thème de la flore:
<!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>
Voici le code html qui utilise le thème ThemeRoller téléchargé:
<!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>
Comme vous pouvez le constater, seuls les noms de fichier css et de classe référencés sont différents. Quelqu'un at-il une idée de ce qui pourrait être faux?
@David: Je l'ai essayé, et ça ne semble pas fonctionner (ni sur FF ni sur IE). J'ai essayé CSS en ligne:
style="z-index:5000"
et je l'ai également essayé référence à un fichier CSS externe:
#SERVICE03_DLG{z-index:5000;}
Mais aucun de ces travaux. Ai-je manqué quelque chose dans ce que vous avez suggéré?
Modifier:
Résoudre par brostbeef!
Comme j'utilisais initialement la flore, j'avais supposé à tort que je devais spécifier un attribut de classe. Il s'avère que ce n'est vrai que lorsque vous utilisez réellement le thème de la flore (comme dans les exemples). Si vous utilisez le thème personnalisé, la spécification d'un attribut de classe provoque ce comportement étrange.
Avez-vous toujours ce problème ?? – MDCore
Vous ne savez pas pourquoi vous avez supprimé votre code et les liens substitués ... qui sont maintenant cassés, donc impossible de faire référence. – clairestreb
oups, totalement oublié à ce sujet. Je vais voir si je peux modifier le post pour ramener le code. – Ovesh