如何定位jQuery UI对话框

Question

http://jsfiddle.net/Qt7pQ/5/

上述链接是我正在做的一个样本。

我的问题是我如何使jQuery UI对话框下的单选按钮？

<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div> 
<div id="rbl_2"><input type="radio" group="one" id="r2" value="Butter" checked> Butter</div> 

<div id="divid0" style="border:1px;">0</div> 
<div id="divid1">1</div> 
<div id="divid2">2</div> 

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

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

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

     $('#rbl_0 :radio').hover(

     function() { 
      $('#divid0').dialog('open'); 
     }, function() { 
      $('#divid0').dialog('close'); 
     }); 


     $('#rbl_1 :radio').hover(

     function() { 
      $('#divid1').dialog('open'); 
     }, function() { 
      $('#divid1').dialog('close'); 
     }); 


     $('#rbl_2 :radio').hover(

     function() { 
      $('#divid2').dialog('open'); 
     }, function() { 
      $('#divid2').dialog('close'); 
     }); 

Answer 1

您可以使用jQuery UI的位置工具来做到这一点：http://jqueryui.com/demos/position/

例如，在“中心底”的<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div>你会做这个职位你<div id="divid0" style="border:1px;">0</div>对话框的“中心顶部” ：

$('#divid0').position({ my: 'center top', at: 'center bottom', of: '#rbl_1' });