Question

我有两个单选按钮： radiobutton1和radiobutton2当我将鼠标悬停在它上面时，我显示了jquery-ui对话框窗口......目前它显示的对话太远了...我想要在radiobutton下方显示对话框窗口。如第二张图片所示。

   $(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中测试过这个。您必须在页面上运行它，以查看在调整页面大小或滚动页面时定位是否正常工作。

如果您不关心调整大小或滚动，那么您可以取出所有窗口滚动和调整大小的功能。

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

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

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

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

Answer 3

我认为你所拥有的几乎是正确的。您只需要在位置方法中使用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/。

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

3 个答案: