6
jQuery UI對話框的demos都使用「flora」主題。我想要一個自定義的主題，所以我使用該組合器生成一個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 2008-10-16 04:25:47
不知道爲什麼你刪除了你的代碼和替代鏈接......現在已經被破壞，無法引用。 – clairestreb 2014-12-24 21:51:28