아코디언에 jQuery 모달 대화 상자 추가

저는 지난 몇 주 동안 jQuery를 사용하기 시작했으며 정말 즐겁습니다. 환상적인 일입니다! 나는 한 순간에 문제가있다. 여기 내 페이지의 기본 구조는 다음과 같습니다아코디언에 jQuery 모달 대화 상자 추가

<body> 
    <div id="accordionContainer"> 
    <div class="accordionSectionHeader"> 
     Some header label... 
    </div> 
    <div class="accordionSectionContent"> 
     Some content... 
     <a href="#">Popup dialog</a> 
    </div> 
    </div> 

    <div id="dialog"> 
    Some dialog content here... 
    </div> 
</body>

그것은 매우 간단한 레이아웃 - 당신은 "팝업 대화"를 클릭하면 링크의 맨 위에 배치 대화 DIV 쇼를 연결합니다. 여태까지는 그런대로 잘됐다. 이제 문제가 발생했습니다 - 대화 상자 모달 옵션을 "true"로 설정했지만 아코디언 섹션 헤더를 포함하여 아래에있는 항목을 계속 클릭 할 수 있습니다! 내가 여기 뭔가를 놓친 적이 있니? 내가 나에게있어 매우 새로운 사람인 이래로 나에게 잘못된 것이 무엇인지 알 수 없다.

어떤 제안이나 도움이라도 대단히 감사하겠습니다.

감사합니다. Dany.

출처

2010-07-28 codedog

당신은 당신의 코드에 대한 링크를 게시 할 수 있을까요? –

첫인상 : jQuery를 모달이 당신을 차단하는 것입니다 아래의 상호 작용을 차단하기 위해 좋아하는 방법으로

를 사용하여 불을 지르고는, 어딘가에 코드에서 화면 (등)에 그려지는 사업부가 있는지 확인 화면 크기의 빈 div.

또한 요소의 Z- 색인 속성을 확인하여 아코디언 메뉴가 해당 차단기의 꼭대기에 있지 않도록하십시오. 머리 것인가

다시 한 번 당신이 JQuery와 UI의 CSS 파일 누락을 통해 게시 코드 :

편집

에 코드를 어떤 형태가있다. UI js 파일과 함께 다운로드되는 CSS 파일은 UI 요소의 형식을 제어합니다.

당신이 사용하는 모든 JQuery와 UI 위젯에 영향을 미칠 것이기 때문에 당신은 전체 파일을하지 않을 수 있습니다,하지만 당신이 필요로 할 중요한 라인은 다음과 같습니다

/* Overlays */ 
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

출처

2010-07-28 05:02:06

코드가 아직 살지는 않지만 내일은 자바 스크립트를 올려 놓을 것입니다 ... o firebug : o) – codedog

링크 : http://wikisend.com/download/451934/Default2.zip 오버레이를 잘 만들려면 심지어 100000에 대화 상자가있는 10000이라는 높은 z- 인덱스가 있지만 아코디언은 여전히 오버레이와 대화 상자 사이에있는 것처럼 보입니다! – codedog

D' oh! 너무 고마워! HTML 파일에서 언급 된 스타일이 아닌 잘못된 CSS 파일에 이러한 스타일을 추가했습니다! 다시 한 번 감사드립니다 ... – codedog

아코디언에 jQuery 모달 대화 상자 추가

답변

관련 문제