javascript 如何避免 jquery ui 中的大对话框标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8129296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to avoid big looking dialog title in jquery ui?
提问by foreyez
I am using jQuery UI 1.8 and have the following code:
我正在使用 jQuery UI 1.8 并具有以下代码：
var newDiv = $(document.createElement('div'));
$(newDiv).html('hello there');
$(newDiv).attr('title','Dialog Title');
$(newDiv).css('font-size','62.5%');
$(newDiv).dialog();
For some reason the Title looks really big, see this jsFiddlefor an example.
出于某种原因，标题看起来非常大，请参阅此 jsFiddle示例。
If there any way to make this look more like the version in the jQuery demo?
如果有什么方法可以使它看起来更像jQuery 演示中的版本？
回答by Joseph Marikle
you can use this css rule to apply smaller font size:
您可以使用此 css 规则来应用较小的字体大小：
.ui-dialog{font-size: 62.5%;}
回答by AlienWebguy
.ui-dialog-title {
font-size:14px !important;
}
回答by JasCav
The reason it looks good on the jQuery UI site is that they are using CSS style sheets to style the title bar. If you view their source, you'll see...
它在 jQuery UI 站点上看起来不错的原因是他们使用 CSS 样式表来设置标题栏的样式。如果你查看他们的来源，你会看到......
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
I updated your JSFiddle with the example using this stylesheet: http://jsfiddle.net/WwVgn/5/
我用这个样式表的例子更新了你的 JSFiddle：http: //jsfiddle.net/WwVgn/5/
In any case, if you want to create your own style, head over to the jQuery UI themerollerwebsite and you can easily customize and then export the stylesheets to use for yourself.
无论如何，如果您想创建自己的样式，请访问jQuery UI themeroller网站，您可以轻松自定义并导出样式表以供自己使用。
回答by Rui Jiang
I think you are simply using a different theme which has a large dialog title font. Try creating a new one with http://jqueryui.com/themeroller/.
我认为您只是在使用具有大对话框标题字体的不同主题。尝试使用http://jqueryui.com/themeroller/创建一个新的。
回答by regality
Just add this bit of css:
只需添加一点css：
.ui-dialog-titlebar {
font-size: 80%;
}
