如何在单选按钮下方显示 JQuery-UI 对话框窗口

Question

我有两个单选按钮： 单选按钮1 和单选按钮2，当我将鼠标悬停在它上面时，我显示了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

我提琴了：http://jsfiddle.net/jensbits/dhp3d/1/

我在定位对话框中添加了这个：http://www.jensbits.com/2011/06/19/position-jquery-ui-dialog-relative-to-link/

试一试。您可能需要为窗口滚动和调整大小编写代码，以便解决问题。我只在 jsfiddle 中测试了这个。您必须在页面上运行它以查看在调整页面大小或滚动页面时定位是否正常工作。

如果你不关心resize或者scrolling，那么你可以去掉所有的window scroll和resize函数。

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);
});

});

Answer 2

我认为你所拥有的几乎是正确的。您只需要在位置方法中使用my: 'left top'，而不是my: 'center 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 3

您可以将希望对话框打开的位置的 x,y 坐标作为数组传递，即

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

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