使用themeroller css时，jquery对话框出现问题 [英] A issue with the jquery dialog when using the themeroller css
问题描述
jquery ui的演示对话框全部使用植物主题。我想要一个自定义的主题，所以我使用themeroller生成一个css文件。当我使用它，一切似乎工作正常，但后来我发现我无法控制对话框中包含的任何输入元素（即不能键入文本字段，不能检查复选框）。进一步调查显示，如果将对话框属性modal设置为true，则会发生这种情况。当我使用植物主题时，这不会发生。
以下是js文件：
topMenu = {
init：function（）{
$（＃my_button）bind（click，function（）{
$（＃SERVICE03_DLG）对话框（open）;
$（＃something）。focus（）;
}）;
$（＃SERVICE03_DLG）。对话框（{
autoOpen：false，
modal：true，
resizable：false，
title：我的标题，
overlay：{
opacity：0.5，
background：black
}，
按钮：{
OK （）{
alert（嗨！）;
}，
取消：function（）{
$（this）.dialog（close）;
}
}，
close：function（）{
$（＃something）。val（）;
}
}）;
}
}
$（document）.ready（topMenu.init）;
这是使用植物主题的html：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict。 DTD>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = Shift_JIS>
< title> sample< / title>
< script src =jquery-1.2.6.min.jslanguage =JavaScript>< / script>
< link rel =stylesheethref =flora / flora.all.csstype =text / css>
< script src =jquery-ui-personalized-1.5.2.min.jslanguage =JavaScript>< / script>
< script src =TopMenu.jslanguage =JavaScript>< / script>
< / head>
< body>
< input type =buttonvalue =点击我！ ID = my_button >
< div id =SERVICE03_DLGclass =flora>请输入< br>< br>
< label for =something> somthing：< / label>& nbsp;< input name =somethingid =somethingtype =textmaxlength =20size = 24 >
< / div>
< / body>
< / html>
这是使用下载的themeroller主题的html：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict .dtd>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = Shift_JIS>
< title> sample< / title>
< script src =jquery-1.2.6.min.jslanguage =JavaScript>< / script>
< link rel =stylesheethref =jquery-ui-themeroller.csstype =text / css>
< script src =jquery-ui-personalized-1.5.2.min.jslanguage =JavaScript>< / script>
< script src =TopMenu.jslanguage =JavaScript>< / script>
< / head>
< body>
< input type =buttonvalue =点击我！ ID = my_button >
< div id =SERVICE03_DLGclass =ui-dialog>请输入< br>< br>
< label for =something> somthing：< / label>& nbsp;< input name =somethingid =somethingtype =textmaxlength =20size = 24 >
< / div>
< / body>
< / html>
如您所见，只有引用的css文件和类名不同。
任何人都有一个线索，可能是错误的？
@David：我尝试了，似乎不起作用（无论是FF还是IE）。我试过内联css：
style =z-index：5000
我也尝试了引用外部css文件：
< pre class =lang-none prettyprint-override>
＃SERVICE03_DLG {z-index：5000;}
但这两个都不行。我错过了你建议的内容吗？
编辑：
由brostbeef解决！
由于我原来使用植物区系，所以我误以为我必须指定一个类属性。事实证明，只有当您实际使用植物主题（如样本）时才是真实的。如果您使用自定义的主题，则指定一个类属性会导致这种奇怪的行为。
我认为这是因为你有类（$）
< div id =SERVICE03_DLGclass =flora> （flora） code>< div id =SERVICE03_DLGclass =ui-dialog> （custom）
植物主题，你仍然会使用ui-dialog类将它定义为一个对话框。
我以前做过模态，我从来没有定义过一个类标签。 jQueryUI应该照顾你。
尝试摆脱类属性或使用ui-dialog类。
The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.
Here is the js file:
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);
Here is the html that uses the flora theme:
<!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>
Here is the html that uses the downloaded themeroller theme:
<!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>
As you can see, only the referenced css file and class names are different. Anybody have a clue as to what could be wrong?
@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:
style="z-index:5000"
and I've also tried it referencing an external css file:
#SERVICE03_DLG{z-index:5000;}
But neither of these work. Am I missing something in what you suggested?
Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the "ui-dialog" class.
这篇关于使用themeroller css时，jquery对话框出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
