jquery UIダイアログのdemosはすべて "flora"テーマを使用しています。カスタマイズされたテーマが欲しかったので、私はthemerollerを使ってCSSファイルを生成しました。私が使ったとき、すべてうまくいっていたようでしたが、ダイアログに含まれている入力要素を制御できないことが判明しました（つまり、テキストフィールドに入力できない、チェックボックスをチェックできません）。さらに調査すると、ダイアログ属性 "モーダル"をtrueに設定すると、これが発生することが明らかになりました。私が植物相のテーマを使用している場合、これは起こりません。ここでthemeroller cssを使用しているときのjqueryダイアログの問題
は、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);
は、植物のテーマを使用するHTMLである：ここでは
<!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>
は、ダウンロードしたThemeRollerのテーマを使用するHTMLです：
<!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>
ご覧のとおり、参照されているcssファイルとクラス名だけが異なります。 誰かが間違っている可能性についての手掛かりを持っていますか？
@David：試してみましたが、動作していないようです（FFでもIEでもないようです）。私は、インラインCSS試してみました：
style="z-index:5000"
をし、私はまた、外部CSSファイルの参照、それを試してみた：
#SERVICE03_DLG{z-index:5000;}
しかし、これらの作業のどちらを。あなたが提案したことで何かが見当たりませんか？
編集：
解決するbrostbeef！
私はもともとフローラを使用していたので、誤ってクラス属性を指定する必要があると私は想定していました。これは、（サンプルのように）実際に植物相のテーマを使用した場合にのみ当てはまります。カスタマイズされたテーマを使用する場合、クラス属性を指定すると、その奇妙な動作が発生します。
まだこの問題がありますか？ – MDCore
あなたのコードと置換されたリンクを削除した理由が分かりません。 – clairestreb
おっと、それを完全に忘れてしまった。コードを取り戻すために投稿を編集できるかどうかがわかります。 – Ovesh