jQuery 모달의 위치 제어 제어

Question

아이콘을 클릭하면 나타나는 jQuery를 사용하여 작은 팝업을 만들고 싶습니다. 팝업의 상단 모서리가 아이콘과 겹쳐서 작은 창과 버튼 사이에 직관적 인 연결이 이루어 지도록합니다 (화면 가운데에 나타나는 현재 동작과 반대). 이것은 시계를 클릭 할 때 wunderlist.com과 유사하며 달력이 나타납니다. 달력, 텍스트 상자 및 단추가있는 모달을 만들고 싶습니다.

jquery 모달을 표시 할 수는 있지만 위치를 제어 할 수 없습니다. 항상 화면 중앙에 나타납니다. 난 당신이 다음 코드를 사용할 필요가 경우에 당신은 방법 위치를 option-position

을 사용할 수 있습니다 jQuery UI

<script type="text/javascript"> 
    $.fx.speeds._default = 100; 
    $(document).ready(function() { 

     $("#dialog").dialog({ 
      autoOpen: false, 
      show: "blind", 
     }); 

     $(".hold_btn").click(function() { 
      $("#dialog").dialog("open"); 
      return false; 
     }); 

    }); 
</script> 

<button class="btn btn-primary hold_btn" type="button">Button</button> 

<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

Answer 1

에서 코드를 사용하고 있습니다.

$.fx.speeds._default = 100; 
    $(document).ready(function() { 
    $(".hold_btn").click(function() { 
      $("#dialog").dialog(
       { 
        position: { 
         my: "left top", 
         at: "right top", 
         of: window } } 

      ).dialog("show"); 
      return false; 
     }); 

    }); 

Answer 2

jQueryUI에는 요소를 배치 할 위치를 매우 정밀하게 제어 할 수있는 위치 유틸리티 기능이 있습니다. dialog()의 옵션은 specify a position입니다.

위치 유틸리티 자체는 강력하지만 혼란 스러울 수 있습니다. 다른 구성 옵션에 대해서는 .position()을 읽어 보는 것이 좋습니다.

$('#dialog').dialog({ 
    autoOpen: false, 
    show: 'blind', 
    position: { my: 'left top', at: 'left bottom', of: button } 
});