使用 CSS 在 Jquery UI 对话框中设置主题元素...如何实现？
由于旧版本显然对人们来说太难理解，下面是 HTML、CSS 和 JavaScript 的组合：
$(document).ready(function() {
$('#test').dialog({
autoOpen: false,
modal: true
});
$("#test-link").click(function() {
$('#test').dialog('open');
});
});div#main div#test label {
display: block;
}
div#main div#test input {
padding-left: 100px;
}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<div id="main">
<p><a href="#" id="test-link">test</a>
<p>
<div id="test" title="Submit Bug or Feature Request">
<form>
<label for="test_desc">Short Description:</label>
<input type="text" name="test_desc" id="test_desc" value="" />
<input type="submit" name="" value="Submit" />
</form>
</div>
</div>对话框工作正常，但 CSS 不行。 有什么想法吗？
Since the old version was apparently way too hard for people to understand, here's the HTML, CSS, and JavaScript combined:
$(document).ready(function() {
$('#test').dialog({
autoOpen: false,
modal: true
});
$("#test-link").click(function() {
$('#test').dialog('open');
});
});div#main div#test label {
display: block;
}
div#main div#test input {
padding-left: 100px;
}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<div id="main">
<p><a href="#" id="test-link">test</a>
<p>
<div id="test" title="Submit Bug or Feature Request">
<form>
<label for="test_desc">Short Description:</label>
<input type="text" name="test_desc" id="test_desc" value="" />
<input type="submit" name="" value="Submit" />
</form>
</div>
</div>The dialog works fine, but the CSS does not. Any ideas why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
JQuery 在 DOM 树中移动对话框的 DIV，并将其包装在其他 DIV 中。 因此 CSS 选择器将不起作用。 使用上面的示例，您必须执行以下操作：
JQuery moves a dialog's DIV in the DOM tree and wraps it in some others. Therefore the CSS selectors won't work. Using the above example you'd have to do something like this:
CSS 应该可以工作。 可能是css规则级联方式的问题。 是否有更具体的选择器应用这些规则，例如“#dialog div#test label”？ 如果没有 html/css 的其余部分，就不可能指出具体细节。 获取 firebug 并查看哪些规则应用于这些元素。
The css should work. It might be a problem with how the css rules cascade. Is there a more specific selector applying these rules like "#dialog div#test label"? Without the rest of html/css it's impossible to point out the specifics. Get firebug and see what rules are getting applied to those elements.