2014-01-29 2 views
2

클릭 한 대화 상자를 표시해야합니다. 아래의 링크를 클릭하면 대화 상자가 같은 위치에 나타나야하지만 내 코드 대화 상자에서 링크를 클릭하는 위치 아래에 대화 상자가 표시되어야합니다.대화 상자 위치 지정

JQuery와 것은

$(".showTemplateDialog").dialog('option', 'position', ['center',e.pageY]); 

마우스 위치에서 얻을 대화 상자 제발 도와주세요.

상단 및 왼쪽 위치도 시도해 보았습니다. 하지만 난 대답 아마도

답변

0

여기에 대한 추가 정보를 원하시면 대화 상자의 위치 API를 한 번 봐 가지고이

$(".showTemplateDialog").dialog('option', 'position', [$(this).offset.left,$(this).offset.top]);

같은 것을 시도 라이브 데모 : http://jsfiddle.net/7b2RF/

+0

를이 코드를 사용 대화 상자는 맨 위에 만 표시됩니다. 나는 성공 함수 앞에 경고 상자를 사용하여 경고 상자를 사용하여 내가 클릭 한 위치를 표시했지만 사용 된 경고 상자가 상단에 표시됨 – Bhargavi

+0

위의 업데이트에서 라이브 데모를 확인하고 여기에서 동일한 코드를 정리했습니다. 약간의 바이올린과 ID 대신 클래스를 사용하므로 같은 클래스의 무한한 수의 요소에 사용할 수 있습니다.이 경우에는 "divs"클래스를 사용했습니다. 도움이되기를 바랍니다.AJAX에서 –

+0

내가 성공 사용 함수 (objRequest)를 \t \t \t \t \t \t \t \t \t \t { \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t경고 (왼쪽); \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $ ('showTemplateDialog.') HTML ($ 트림 (objRequest).).; \t \t \t \t \t \t \t \t \t \t $ ('showTemplateDialog.') 대화 상자 ("개방."); \t \t \t \t \t \t \t \t \t $ ("showTemplateDialog.") 대화 ({ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 총수 :. 왼쪽 + 15 가기 + 20 ] \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t}); \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t가}, 성공 내부의 경고는 상단에 표시 – Bhargavi

1

을하지 않았다이 당신에게 그것을 수행하는 방법 아이디어를 얻을 수 있습니다 :

HTML :

<div id="one" class="divs"></div> 
<div id="two" class="divs"></div> 

CSS :

.divs { 
    float: left; 
    height: 48px; 
    width: 80px; 
    border: 1px solid #55f; 
} 

JS :

$(document).ready(function(){ 
    var $div = $('#two'); 
    var left = $div.offset().left; 
    var top= $div.offset().top; 
    $('<p>Some dialog</p>').dialog({position: [left + 20, top + 20]}); 
}); 

여기에 012 링크입니다.

jQuery offset()은 문서에 상대적인 요소 위치를 반환하고 position()은 오프셋 부모를 기준으로 상대적을 반환합니다. http://api.jqueryui.com/dialog/#option-position

UPDATE :