Почему стиль перепутан в этом диалоге?

Question

Когда я открываю диалоговое окно, стиль кажется немного запутанным.Значок закрытия находится не там, где должен быть, границы выглядят слишком большими.Вот ссылка в JsFiddle

Я использую JQuery 1.5.1 и JQuery-ui-1.8.11.

JSFiddle

Answer 1

chobo, проблема с вашим образцом отсутствовала в необходимых файлах JS и CSS для выполнения действия Dialog.

пожалуйста, просмотрите эту ссылку, так как я исправил ваш пример, чтобы включить необходимые файлы

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

отметьте их в левом углу в разделе «Управление ресурсами»

пометьте в качестве ответа, если это помогло вам.

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; }

• Или вы можете использовать тему ролик , чтобы сделать свой собственный CSS, убедитесь, что вы отметили нужные параметры.

• Или вы можете использовать одну из стандартных тем, , вы даже можете использовать ее изGoogle CDN

Answer 3

Не похоже, что у вас есть CSS для диалога.В вашем файле CSS есть ссылка , перейдите по этой ссылке, затем выберите тему загрузки и убедитесь, что перед виджетом вы выбрали диалоговое окно под виджетами.

Answer 4

Может быть, потому что jsFiddle не включает CSS или изображения в свою реализацию пользовательского интерфейса jQuery?