이 대화 상자에서 스타일이 엉망인 이유는 무엇입니까?

Question

대화 상자를 열면 스타일이 엉망으로 보입니다. 닫기 아이콘이 있어야하는 위치가 아니기 때문에 테두리가 너무 크게 보입니다. 다음은 JsFiddle의 링크입니다.

JQuery 1.5.1 및 JQuery-ui-1.8.11을 사용하고 있습니다. 그것은 당신처럼 보이지 않는

JSFiddle

Answer 1

chobo, 샘플의 문제는 대화 상자 작업을 수행하는 데 필요한 JS 및 CSS 파일이 누락되었습니다. 내가 샘플을 수정 한대로

은 대답 것처럼 표시하십시오

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

이

"자원 관리"아래 왼쪽 모서리에서 그들을 확인 필요한 파일을 포함하려면이 링크를 참조하시기 바랍니다 그것은 당신을 도왔습니다.

Answer 2

대화에 대한 CSS의가있다. a link in your CSS 파일이 있습니다. 그 링크로 이동하여 다운로드 테마를 선택하고 "다운로드"를 클릭하기 전에 위젯 아래의 대화 상자를 선택하십시오.

Answer 3

jsFiddle에 jQuery UI 구현에 CSS 또는 이미지가 포함되어 있지 않기 때문일 수 있습니까?

Answer 4

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를 만들기 위해 theme roller를 사용하여 당신이 필요로하는 옵션을 선택합니다 확인 할 수 있습니다

  • 중 하나를 추가 할 수 있습니다.

  • 아니면 표준 테마의 중 하나를 사용할 수 있습니다, you can even use it from the Google CDN