使用themeroller css时jquery对话框的问题
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解决！
由于我最初使用植物区系，我错误地认为我必须指定一个类属性。事实证明，只有在实际使用植物群主题时才如此（如样本中所示）。如果您使用自定义主题，指定类属性会导致奇怪的行为。
我认为这是因为你有不同的类。 <div id="SERVICE03_DLG" class="flora">（菌群）<div id="SERVICE03_DLG" class="ui-dialog">（自定义）
即使在植物的主题，你仍然会使用UI的对话框类将其定义为一个对话框。
我已经完成了模态，我从来没有在标签中定义过类。 jQueryUI应该照顾你。
试着摆脱class属性或使用“ui-dialog”类。
在Firebug中玩这个之后，如果你添加一个大于1004的z-index属性到你的默认div，ID为“SERVICE03_DLG”，那么它将起作用。我想给它一些非常高的东西，比如5000，只是为了确定。
我不确定它是什么引起这一点的themeroller CSS。他们可能已经改变或忽略了目标div的位置属性，它变成了一个对话框。
男人，这是一个很好的。我试着在这两页上做了一堆事情。你有没有尝试过把CSS完全放出来，然后尝试两页？我使用Firebug从两页上的标题中删除CSS，并且输入仍然在一个上，而不是在另一个上 - 但是，我倾向于认为Firebug不会从渲染中完全删除CSS，而您如果你真的从代码中删除它，会得到不同的结果。
我还发现你可以使用鼠标将文本粘贴到文本框中 - 它只是不接受键盘输入。虽然似乎没有任何事件处理程序会干扰这一点。
我试图用对话框和选项卡实现一个themeroller主题，事实证明，themeroller CSS不适用于官方jQuery！特别是对话框和标签，他们修改了官方jquery的元素类。在这里看到： http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
用户的评论：
3），我 下载生成的题材似乎是不完整的 - 当我尝试使用我的标签 （与菌群工作主题，代码 等同于文档 例子）不要让风格为标签
已经运行到3我想我是 卡住，必须使用0123恢复“flora”...我自 发现了 文件的源代码，如果我调整我的html并给 < li>我用于我的标签 的项目“ui-tabs-导航项目“类然后它 将工作。
由整理者生成的主题是 ，因此不幸的是不完整。如果 标签的东西不完整，这让我想知道还有什么不完整。它 是相当沮丧。 :(
其次是开发商的ThemeRoller评论：
3）我们会看看那个。你是对的，这些类 应该由插件添加。现在虽然，它可能 不会伤害太多只是将它们添加到您的标记，所以你 可以使用美乐家主题。不过，我们会检查出来的。我认为我们的选择器可能是 ，而不是基于父UI标签选择器，但我认为 我们试图不在我们的选择器中使用元素。考虑 它在待办事项列表
你还有这个问题吗？ – MDCore 2008-10-16 04:25:47
不知道为什么你删除了你的代码和替代链接......现在已经被破坏，无法引用。 – clairestreb 2014-12-24 21:51:28