커스텀 대화상자에서 정보 아이콘 표시 문제 해결

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• jQuery UI 대화상자 컴포넌트 사용자
• 중급 이상의 프론트엔드 개발자 (CSS/JS 동작 원리 이해 필요)

핵심 요약

• ui-icon-info 아이콘 표시 실패 원인: icon 속성 사용 시 ui-icon 클래스 누락
• 필수 조건: icon 속성에 ui-icon 클래스 포함 (ui-icon-info 대신 ui-icon ui-icon-info 사용)
• 추가 디버깅 방법: console.log로 대화상자 DOM 요소 확인, CSS 선택자 우선순위 분석

섹션별 세부 요약

1. 문제 현상 및 코드 분석

• $('#custom-alert').dialog() 호출 시 정보 아이콘(ui-icon-info)이 표시되지 않음
• icon: "ui-icon-info" 설정으로 아이콘 적용 시도
• modal: true 설정으로 인한 레이아웃 간섭 가능성

2. 해결 방법

• 필수 수정: icon 속성에 ui-icon 클래스 명시 ("ui-icon ui-icon-info")
• CSS 우선순위 문제: !important 사용 시 .ui-icon 기본 스타일 오버라이드 가능성
• 대체 방안: icon 속성 대신 classes 속성 사용 (classes: "ui-icon ui-icon-info")`

3. 디버깅 절차

• DOM 요소 확인: document.querySelector('.ui-icon')으로 아이콘 요소 추적
• CSS 분석: inspect로 .ui-icon-info 스타일 적용 여부 확인
• 콘솔 로그: console.log($('.ui-dialog-buttonpane button'))로 버튼 요소 구조 분석

결론

• 핵심 팁: ui-icon 클래스 명시가 필수이며, !important 사용 시 CSS 오버라이드 주의
• 추천 구현:

$('#custom-alert').dialog({
  title: title,
  modal: true,
  width: 600,
  height: 320,
  closeText: '',
  buttons: [{
    icon: "ui-icon ui-icon-info", // 클래스 명시
    click: function () {
      $(this).dialog('destroy').remove()
    }
  }]
});