버튼의 자식으로 팝업을 만드는 방법은 무엇입니까?

Question

버튼 아래에 jQuery UI 대화 상자 팝업을 배치하려고합니다.

위치를 좌우로 바꿀 수 있지만 화면 상단에 팝업이 나타납니다.

어떻게 팝업 위치 높이를 설정할 수 있습니까?

JS

 $(function() { 
      $("#myDialog").dialog({ 
       autoOpen: false, 

       show: 'fade', 
       hide: 'fade', 
       modal: false, 
       width: 300, 
       draggable: false, 
       minHeight: 200, 
       //buttons: { 
       // "Close": function() { 
       //  $(this).dialog("close"); 
       // } 
       //} 
      }); 

      $("#myLink").click(function (e) { 
       e.preventDefault(); 
       $("#myDialog").dialog("open"); 
       return false; 
      }); 

      function positionDialog() { 
       linkOffset = $("#myLink").position(); 
       linkWidth = $("#myLink").width(); 
       linkHeight = $("#myLink").height(); 
       scrolltop = $(window).scrollTop(); 
       $("#myDialog").dialog("option", "position", [(linkOffset.left - 550/ 2) + linkWidth/2, (linkOffset.top - 220/2) + linkHeight - scrolltop]); 
      } 

      positionDialog(); 

      $(window).resize(function() { 
       positionDialog(); 
      }); 

      $(window).scroll(function() { 
       positionDialog(); 
      }); 
     }); 

HTML

<div style="text-align:center; float:left"><a href="#" id="myLink">Login here</a></div> 
     <div id="myDialog" title=" Login"> 
     @Html.Partial("_LoginPopupPartial")     
</div> 

누군가가 나를 도와주세요 수 :

여기 내 코드입니다. 팝업은 어디에서나 내 버튼을 배치해야합니다. 또한 버튼 아래에 있어야합니다.

Answer 1

jQuery UI 위치 유틸리티를 사용하면 훨씬 간단한 방식으로 필요한 것을 얻을 수 있습니다. 참조 : 대신 모든 자신의 계산을하는 http://api.jqueryui.com/position/

상쇄하고 대화 상자를 열 때 위치는, 단순히이 수행 여기

$('#myDialog').dialog('option', 'position', { my: "top", at: "center bottom", of: this }).dialog("open"); 

jsFiddle을 : http://jsfiddle.net/W7ayC/

.position() 유틸리티 차종 창과 관련된 원하는 대화 상자, 표준 JQ 선택기를 통해 여는 요소 또는 기타 요소를 쉽게 배치 할 수 있습니다.

희망이 도움이됩니다.