如何在单选按钮下方显示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: '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 2

您可以在X通，在希望对话，以作为数组打开ie

$(".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); 
}); 

});