2014-09-05 4 views
1

위젯 표시 (주로 고화질 jquery를 기반으로 작성)가 포함 된 웹 페이지가 없습니다. 일반적으로 위젯은 데이터를 가져 오기 전에 로딩 스위블을 표시하며이 스위블은 해당 스크린/위젯의 중앙에 나타납니다. 한 페이지에서 두 개의 탭이있는 아코디언이 있습니다 (기본적으로 탭 1이 열리고 데이터가로드되기 전에 회전이 중앙에옵니다). 탭 1의 버튼을 클릭하면 아코디언 탭 2가 열립니다. 데이터가 tab2에 표시되기 전에 탭 2에 스위블이 나타납니다. 여기에서 문제는 탭 1 버튼을 클릭하면 탭 2가 열리고 (슬라이딩 업) 스위블이 해당 div의 상단에 표시됩니다. (위로 움직이는). 나는 그것을 중심에 보여줄 필요가있다.jquery blockUI 메시지가 탭이 열릴 때 아코디언 내부로 이동

이 앱 및 다른 모든 앱에 사용되는 CSS는 중앙 집중식입니다. 따라서 인터넷에서 언급 된 답변은 통합 될 수 없습니다.

클릭 버튼 등의 이벤트에 대한 jquery 코드는 중앙의 별도 js 파일로 작성됩니다. exportout 버튼에 mouseout/mouseleave 이벤트를 첨부하고 마우스가 내 하위 메뉴를 가리키고 있는지 확인했습니다. 그렇지 않은 경우 하위 메뉴를 닫습니다. Chrome에서는 정상적으로 작동하지만 IE에서는 정상적으로 작동하지 않습니다. 문제를 일으키는 :

생성 된 HTML 텍스트의

<div class="blockUI" style="display:none"></div> 
<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; position: absolute;"></div> 
**<div class="blockUI blockMsg blockElement" style="z-index: 1011; position: absolute; ***top: 0px***; left: 351.5px;"><img src="../../Apps/Images/loading.gif"></div>** 

밑줄 atttribute가 (0 픽셀 위)이다. 나는 내 CSS를 확인했다. 이것은 어디에도 설정되지 않았습니다.

마지막 사업부의 CSS는

element.style { 
    z-index: 1011; 
    position: absolute; 
    top: 0px; 
    left: 351.5px; 
} 
div.blockMsg { 
    padding: 0; 
    margin: 0; 
    width: 40%; 
    top: 40%; 
    left: 30%; 
    color: #FF0000; 
    cursor: wait; 
    text-align: center; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    line-height: 1em; 
} 
user agent stylesheetdiv { 
    display: block; 
} 

사업부가 (숨길 수) 때 blockdiv는 초기 순간에로드 된 확장 시작입니다. 그 당시에는 기본적으로 센터에 있습니다. 그러나 아코디언 탭 2가 열리기 때문에 div 높이가 증가하기 시작하고 블록 div는 여전히 상단에 남아 있습니다. 도움이 매우 감사합니다. TIA.

답변

0

위치 수 : 고정; 절대적이지 않고 코드에 사용하기