2009-12-02 6 views
2

jQuery UI 대화 상자가 있습니다. 모달이며 바운스 (Bounce) 효과와 함께 표시됩니다. 배경이 줄무늬 이미지로 흐려져있는 테마를 사용합니다. 대화 상자가 처음 열리면 스트라이프 배경은 바운스 (bounce) 효과가있는 동안 대화 상자를 덮습니다. 반송 효과가 완료되면 대화 상자가 모달이되어 줄무늬 배경 앞에 나타납니다. 다음 번에 대화 상자가 배경 바로 앞에서 튀어 오릅니다.show 효과 중에 jQuery UI Dialog Modal을 만들려면 어떻게해야합니까?

대화 상자를 배경 앞에 바로 표시하려면 어떻게해야합니까?

답변

2

톰의 대답은 올바른 방향으로 나를 가리켰다. 방화범은 매우 유용했다! 거기;

대화가 나는 파라미터 "Z- 색인 = 1005"추가의 UI \의 effects.core.js 에서 createWrapper 함수 생성되는 <div class="ui-effects-wrapper"> 래핑된다 (단지 확인하기 위해).

그래서 JQuery와-UI-1.7.2.custom.min.js에서 지금이 가장 좋은 방법인지 확실하지이

createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>'); 

처럼 보이지만 그것은 작동합니다.

+0

좋은 결과. 나는 아코디언이 정지했을 때보 다 움직일 때 더 넓어지는 비슷한 상황을 한번 경험했습니다. 이로 인해 페이지 레이아웃이 점프되었습니다. 라이브러리 소스 코드도 조금 수정해야했습니다. 슈퍼 깨끗한 아니지만, 나는 다른 방법을 보았다. 너무 기분 나빠하지 마세요 ;-) –

1

애니메이션이 끝날 때까지는 대화 상자의 zIndex가 할당되지 않은 것처럼 들립니다. 당신의 CSS에서 이것을 시도 :

.ui-dialog { 
    z-index: 1002; 
} 

대화 상자가 보통이 CSS 클래스를 가지고 있고, 오버레이는 일반적으로 (적어도 내가 현재 사용하고있는 버전) 1000 Z- 색인이있다. 이 방법이 효과가 없다면 애니메이션 중에 다른 클래스에 이 할당되어 있는지 (파이어 폭스 사용) 찾아서 zIndex를 할당하십시오.

관련 문제