Question

当我打开一个对话框时，造型似乎有些混乱。关闭图标不在应有的位置，边框看起来太大了。这是JsFiddle中的链接

我正在使用JQuery 1.5.1和JQuery-ui-1.8.11。

Answer 1

看起来你没有任何对话框的CSS。有a link in your CSS文件，转到该链接，然后选择下载主题，并确保在单击“下载”之前选择小部件下的对话框。

Answer 2

你的css缺少对话框代码。

添加：

/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

或者您可以使用theme roller制作自己的CSS，确保勾选所需的选项。
或者您可以使用其中一个标准主题you can even use it from the Google CDN

Answer 3

chobo，您的示例问题是缺少执行Dialog操作所需的JS和CSS文件。

请检查此链接，因为我已修复您的示例以包含所需文件

http://jsfiddle.net/dcc5A/3/

从“管理资源”

下的左上角查看它们

如果有帮助，请标记为答案。

Answer 4

可能是因为jsFiddle在jQuery UI的实现中不包含CSS或图像？

为什么样式在这个对话框上搞砸了？

4 个答案: