使用themeroller CSS时，jquery对话框出现问题
jQuery ui对话框的演示都使用" flora"主题。我想要一个自定义的主题，因此我使用themeroller生成了一个CSS文件。当我使用它时，一切似乎都工作正常，但是后来我发现我无法控制对话框中包含的任何输入元素(即，无法在文本字段中键入，无法选中复选框)。进一步的调查表明，如果我将对话框属性" modal"设置为true，则会发生这种情况。当我使用植物群主题时，不会发生这种情况。
这是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解决！
由于我最初使用的是菌群，因此我错误地认为必须指定类属性。事实证明，仅当我们实际使用植物区系主题时才如此(如示例中所示)。如果使用自定义主题，则指定类属性会导致这种奇怪的行为。
解决方案
回答
在Firebug中使用此功能后，如果我们向默认div(ID为" SERVICE03_DLG")添加了大于1004的z-index属性，那么它将起作用。可以肯定的是，我会给它一个极高的值，例如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) the generated theme that I downloaded seems to be incomplete - when I attempt to use it my tabs (which work with the flora theme, code identical to the documentation example) do not get styled as tabs Having run into 3 I thought I was stuck and would have to revert using “flora"… I have since discovered by reading the source code of the “demo” file that if I adjust my html and give the < li> items I’m using for my tabs the “ui-tabs-nav-item” class then it will work. The theme generated by themeroller is thus unfortunately incomplete. If the tabs stuff is incomplete, it makes me wonder what else is incomplete. It was rather frustrating. :(
其次是themeroller开发人员的评论：
3) We’ll take a look at that. You’re right that those classes should be added by the plugin. For now though, it probably wouldn’t hurt much to just add them to your markup so you can use themeroller themes. We’ll check it out, though. I think our selectors could be based off of the parent ui-tabs selector instead, but I think we were trying not to use elements in our selectors. Consider it on the to-do list
回答
我认为这是因为课程有所不同。<div id =" SERVICE03_DLG" class =" flora">(植物区系)<div id =" SERVICE03_DLG" class =" ui-dialog">(自定义)
即使具有植物主题，我们仍将使用ui-dialog类将其定义为对话框。
我之前做过模态，甚至从未在标签中定义过一个类。 jQueryUI应该为我们解决这个问题。
尝试摆脱class属性或者使用" ui-dialog"类。
