如何定位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="divid0" style="border:1px;">0</div> 对话框的“中心顶部”定位在<div id="rbl_1"><input type="radio" group="one" id="r1" value="Milk"> Milk</div> 的“中心底部”，您可以这样做：

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