使用 themeroller css 时 jquery 对话框的问题

2022-01-15 00:00:00 user-interface dialog jquery javascript

jquery ui 的 演示对话框都使用flora"主题.我想要一个定制的主题，所以我使用了themeroller来生成一个css文件.当我使用它时，一切似乎都运行良好，但后来我发现我无法控制对话框中包含的任何输入元素(即无法输入文本字段，无法选中复选框).进一步调查显示，如果我将对话框属性modal"设置为 true，就会发生这种情况.当我使用植物主题时，这不会发生.

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.

这里是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:

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>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

这是使用下载的themeroller主题的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>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

如您所见，只有引用的css文件和类名不同.有人知道可能出了什么问题吗?

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:我试过了，但它似乎不起作用(在 FF 或 IE 上都没有).我试过内联css:

@David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:

style="z-index:5000"

我也尝试过引用外部 css 文件:

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?


用brostbeef解决！
因为我最初使用的是flora，所以我错误地认为我必须指定一个类属性.事实证明，这仅在您实际使用植物主题(如示例中)时才是正确的.如果您使用自定义主题，指定类属性会导致这种奇怪的行为.


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.

推荐答案

我想是因为你有不同的类.
<div id="SERVICE03_DLG" class="flora">(植物区系)
<div id="SERVICE03_DLG" class="ui-dialog">(自定义)

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)

即使使用植物主题，您仍然可以使用 ui-dialog 类将其定义为对话框.

Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.

我以前做过模态，我什至从未在标签中定义过一个类.jQueryUI 应该会为您解决这个问题.

I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.

尝试摆脱类属性或使用ui-dialog"类.

Try getting rid of the class attribute or using the "ui-dialog" class.

相关文章