jquery 모바일에 팝업을 배치 할 수 없습니다.

Question

jQuery 모바일을 사용하고 있습니다. 내 웹 페이지에서 data-role을 헤더로 사용하여 div를 만들었습니다. 이 안에는 이미지가 있습니다.
이제 data-role 팝업으로 다른 div를 만들었습니다. 페이지가로드되면 역할이있는 div 팝업이 예상대로 숨겨집니다.
사용자가 이미지를 클릭하면 팝업이 표시 될 것으로 예상됩니다.
있습니다. 문제는 헤더를 겹쳐서 팝업을 트리거 한 이미지 바로 아래에 표시하는 것입니다.

나는 다음과 같은 옵션

$("#navBar").popup("open", { 
    x: 0, 
    y: 50, 
    transition: "reverse slide" 
}); 

이 트릭을하지 않습니다를 전달하여 이미지 선택에 팝업 메소드를 호출하고 있습니다. 대신 팝업이 트리거 된 이미지 바로 아래에 팝업이 표시됩니다. X 및 Y 옵션이 제거되면 창 중앙에 팝업이 표시됩니다.

<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0"> 

여기

가 jQuery를 모바일 = 15 픽셀을 스타일링 상위 = 30 픽셀을 첨가하고, 남은 것을 알 수있다 : -

일부 추가 정보 여기 JQuery와 모바일 제조했다는 코드이다.
내 요구를 충족시키기 위해 나는 그 top = 40px, left = 0px를 원한다. 기본 CSS를 재정의하지 않고이 작업을 수행하려고합니다. popup() 메서드에 전달 된 X 및 Y 옵션이 트릭을 수행하지만 작동하지 않기를 바랬습니다!
이해를 돕는 문제는 Image입니다.

Answer 1

기본적으로 popup은 API를 사용하여 x 및 y를 지정하는 경우에 해당 좌표에서 팝업을 시도 할 때마다 열어 본 요소 위에 직접 위치하려고합니다. 그러나 화면 jquery 모바일을 보여주는 팝업을 피하기 위해 팝업 대화 상자와 화면 가장자리 사이에 패딩을 적용합니다. 기본적으로 패딩 여백은 수직 30 및 수평 15입니다. 그래서 당신의 강아지가 그 위치에있는 이유는 그 공차 때문입니다.

정확히 x와 y로 팝업을 배치하려면 원하는 x에 팝업 폭의 절반을 추가하고 팝업 높이의 절반을 원하는 y만큼 추가해야합니다.