라디오 버튼 아래에 JQuery-UI 대화 상자 창을 표시하는 방법

Question

나는 두 개의 라디오 버튼 : radiobutton1과 radiobutton2를 가지고 있는데, 그 위에 마우스를 가져 가면 jquery-ui 대화 창을 보여주었습니다 ... 현재 대화를 너무 멀리 보여주고 있습니다. 오른쪽 ... 라디오 버튼 바로 아래에 대화창을 보여주고 싶습니다. 두 번째 이미지에 나와 있습니다.

$(document).ready(function() { 

      $('#div_').dialog({ 
       autoOpen: false, 
      }); 

      $(".radiobutton1").hover(
       function(){ 
        $('#div_').dialog({title: "Iamge Left)"});    
        $('#div_').removeClass("radiobutton1_1 radiobutton2").dialog('open'); 
        var target = $(this);  
        $("#div_").dialog("wid").position({   
         my: 'center top',   
         at: 'center bottom'//,   
         //of: target  
        }); 
       }, 
       function(){ 
        $('#div_').dialog('close'); 
      }); 

      $(".radiobutton2").hover(
       function(){ 
        $('#div_').dialog({title: "Images Right"});    
        $('#div_').removeClass("radiobutton1_1 radiobutton2").addClass("radiobutton2").dialog('open'); 
        $("#div_").dialog("wid").position({   
         my: 'center top',   
         at: 'center bottom'//,   
         //of: target  
        }); 
       }, 
       function(){ 
        $('#div_').dialog('close'); 
      }); 
    }); 

Answer 1

나는 당신이해야하는 것은 거의 정확하다고 생각합니다. 위치 방법에 my: 'center top' 대신 my: 'left top'이 필요합니다. 또한 .dialog("wid")을 .dialog("widget")으로 변경하십시오. 나는 후자가 당신 편에서 오타라고 추측합니다.

var target = $(this); 
$("#div_").dialog("widget").position({ 
    my: 'left top', 
    at: 'center bottom',   
    of: target  
}); 

실례 : http://jsfiddle.net/william/dVZex/을 참조하십시오.

Answer 2

당신은 X에 전달할 수 있습니다

, 당신은 대화 상자가

$(".selector").dialog({ position: [300,300] }); 

$('#div_').dialog({ 
    autoOpen: false, 
    position: [300,300] 
}); 

Answer 3

즉 배열로 열려 곳의 y 좌표 나는 바이올린 채찍질 : http://jsfiddle.net/jensbits/dhp3d/1/

내가이 추가를 위치 지정 대화 상자에 대한 설명 : http://www.jensbits.com/2011/06/19/position-jquery-ui-dialog-relative-to-link/

시도해보십시오. 윈도우 스크롤 및 크기 조정 코드를 작성해야 피더에 올 수 있습니다. 나는 jsfiddle에서만 이것을 테스트했다. 페이지 크기를 조정하거나 스크롤 할 때 위치가 제대로 작동하는지 확인하려면 페이지에서이 항목을 실행해야합니다.

크기 조정 또는 스크롤에 신경 쓰지 않으면 모든 창 스크롤 및 크기 조정 기능을 수행 할 수 있습니다.

는

HTML :

<input type="radio" name="radioImage" id="radio1" class="opendialog" />Images Right 
<input type="radio" name="radioImage" id="radio2" class="opendialog" />Images Left 


<div id="dialog1" class="dialog"> 
    <p> My positioned dialog 1</p> 
</div> 
<div id="dialog2" class="dialog"> 
    <p> My positioned dialog 2</p> 
</div> 

jQuery를이 :

function getNum(element, attrPrefix) { 
    //set prefix, get number 
    var prefix = attrPrefix; 
    var num = element.attr("id").substring((prefix.length)); 
    return num; 
} 

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

$(function() { 
$(".dialog").dialog({ 
    autoOpen: false, 
    show: 'fade', 
    hide: 'fade', 
    modal: false, 
    width: 320, 
    minHeight: 180, 
    buttons: { 
     "Close": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$(".opendialog").change(function() { 
    $(".dialog").dialog("close"); 
    if ($(this).is(":checked")) { 
     var num = getNum($(this), "radio"); 
     positionDialog($("#radio1"), $("#dialog" + num)); 
     $("#dialog" + num).dialog("open"); 
    } 
    return false; 
}); 

//resize and scroll function are optional - you may or may not need them 
$(window).resize(function() { 
    var openDialog = $(".dialog" + getNum($(".opendialog:checked")), "radio"); 
    positionDialog($("#radio1"), openDialog); 
}); 

$(window).scroll(function() { 
    var openDialog = $(".dialog" + getNum($(".opendialog:checked")), "radio"); 
    positionDialog($("#radio1"), openDialog); 
}); 

});