demos jquery ui 对话框都使用“flora”主题。我想要一个自定义的主题，所以我使用 themeroller 来生成一个 css 文件。当我使用它时，一切似乎都很好，但后来我发现我无法控制对话框中包含的任何输入元素(即无法在文本字段中键入内容，无法选中复选框)。进一步调查显示，如果我将对话框属性“modal”设置为 true，就会发生这种情况。当我使用 flora 主题时不会发生这种情况。
这是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);
这是使用 flora 主题的 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 解决!
因为我最初使用的是 flora，所以我错误地认为我必须指定一个类属性。事实证明，只有当您实际使用植物群主题(如示例中)时才会出现这种情况。如果您使用自定义主题，指定类属性会导致出现这种奇怪的行为。
最佳答案
我认为这是因为你的类(class)不同。
<div id="SERVICE03_DLG" class="flora"> (植物群)
<div id="SERVICE03_DLG" class="ui-dialog"> (自定义)
即使使用 flora 主题，您仍然会使用 ui-dialog 类将其定义为对话框。
我以前做过模态，但我从来没有在标签中定义过类。 jQueryUI 应该会为您解决这个问题。
尝试摆脱类属性或使用“ui-dialog”类。
关于javascript - 使用 themeroller css 时 jquery 对话框的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45600/