jquery 모바일 대화 상자를 사용자 정의하는 방법

Question

대화 상자의 기본 서식을 제거하고 자체 CSS를 적용하려면 어떻게합니까?

내 시도가 잘 작동하지 않습니다

...

<div data-role="dialog" id="confirm-clear" class="dialog-custom" > 
    <div data-role="content" > 
     <p>Some text.</p> 
     <p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p> 
    </div> 
</div> 

편집 :

.ui-dialog.dialog-custom { 

background: repeat scroll 0 0 rgba(0,0,0,.5); 

height:200px; /* this doesn't do anything */ 
} 

Answer 1

JQM은 테마를 달성하기 위해 다양한 스타일을 사용하여, 같은 : 내 CSS에 그리고 배경 위치 오프셋이있는 웹킷 그라디언트 및 배경 이미지. 그것은 또한 레이아웃을위한 divs 또는 inserts span 등의 일부 요소를 래핑합니다.

크롬 개발자 도구와 같은 디버거를 사용하고 계산 된 스타일에서 대화 상자를 검사해야 스타일이 표시되고 오버라이드되는지 또는 효과가 적용되는지 확인할 수 있습니다. 스타일이 적용될 때까지 jQM의 삽입 및 제거를위한 추가 레이아웃 요소를 볼 수도 있습니다.

이제! 사용하여 JQM의 스타일을 재정의하는 중요한 시작하거나 JQM의 CSS 파일을 개질시키기

Answer 2

CSS는 기본적으로 가장 독특한 선택기를 사용하고 jQuery를 모바일은 아마 더 독특한 선택기를 사용하고 있습니다. 당신은 당신의 CSS 선언을 사용하고 있는지 확인하기 위해 !important 키워드를 사용할 수 있습니다

.ui-dialog.dialog-custom { 
    background : repeat scroll 0 0 rgba(0,0,0,.5); 
    height  :200px !important; 
} 

당신은 무엇 CSS 규칙 크롬 개발 도구 또는, 당신이 적용되고 어떤 스타일을 볼 수 방화범과 같은 개발자 도구와 요소를 검사하면 그들은 와라. 이렇게하면 기존 프레임 워크에 스타일을 추가하는 가장 좋은 방법을 결정하는 데 도움이됩니다.

대화 상자에 대해서는 잘 모르겠지만 페이지 위젯의 경우 요소의 CSS 속성은 min-height이며 jQM 프레임 워크를 통해 변경되었습니다. 대화 상자의 jQM resize 이벤트 핸들러를 덮어 쓰면이 문제를 해결할 수 있습니다.