JQuery UI Dialog_jquery의 스타일 설정 문제에 대한 간략한 분석

최근 JQUERY UI Dialog 플러그인을 사용하고 있는데 매우 강력하다고 느껴지지만 스타일 설정이 번거로워 이틀간의 연구 끝에 드디어 완성했습니다.

플러그인 실행을 위해 필요한 환경은 다음과 같습니다

jquery.ui.all.css는 시작 스타일의 CSS입니다. Firefox로 열어서 보면 플로팅 레이어의 제목은 다음과 같습니다.

원스톱 솔루션 모든 사람을 위한 팁

사실 스팬이므로 이 클래스 ui-dialog-title에 따라 공식 홈페이지의 CSS 디렉토리로 가서 jquery.ui.dialog.css 파일을 찾고 classui-dialog-title을 찾습니다. CSS 스타일.

.ui-dialog .ui-dialog-title { 글꼴: 62.5% "Trebuchet MS" , sans-serif;font-weight:bold;float: 왼쪽; 여백: .1em 16px .1em 0;

우리가 원하는 플로팅 레이어의 헤더 스타일을 얻으려면 이 CSS를 수정하세요.

헤더 배경 설정:

.ui-widget-header { 테두리: 1px 단색 #aaaaaa; 배경: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% 반복-x; 글꼴-가중치: 굵게 }

배경 이미지를 제거하고 배경색으로 설정할 수 있습니다

.ui-widget-header { 테두리: 1px 단색 #aaaaaa; 색상: #222222; 글꼴 두께: 굵게;

x 및 오른쪽 하단 아이콘 설정 정보:

icon.ui-icon { 너비: 16px; 높이: 16px; 배경 이미지: url(images/ui-icons_256x240.png);