how to show JQuery-UI Dialog window beneath the radio button

Question

i have two radio button: radiobutton1 and radiobutton2 and when i hover over it i showed the jquery-ui dialog window... currently its showing the dialogue too far to the right... what i want to show the dialog window right underneath the radiobutton. as shown in second image.

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

http://stackoverflow.com/questions/744554/jquery-ui-dialog-positioning — Evan, Sep 22 '11 at 19:53

jk. · Answer 1 · 2011-09-23T16:56:54.717

I whipped up a fiddle: http://jsfiddle.net/jensbits/dhp3d/1/

I added this to a tut on positioning dialogs: http://www.jensbits.com/2011/06/19/position-jquery-ui-dialog-relative-to-link/

Give it a try. You might need to code for window scrolling and resizing so that is in the fiddle. I only tested this in jsfiddle. You will have to run it on a page to see if the positioning works correctly when the page is resized or scrolled.

If you don't care about resizing or scrolling, then you can take out all the window scroll and resize functions.

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

});

thanks JK for your effort, one minor change, even if i click on `image left` i still want that align to all the way to left, like how it does for `image right` — Nick Kahn, Sep 23 '11 at 00:46
what line of code do i need in order for my code to work just like yours (showing the window beneath...) — Nick Kahn, Sep 23 '11 at 01:14
@AbuHamzah If you need to know which lines were changed, click on the link in SO next to 'edited'. That will show all changes to the answer. — jk., Sep 23 '11 at 16:58
thanks +1 but your example with mine is bit complicated William Niu solutions what i wanted with very minor tweak. thanks for the reply. — Nick Kahn, Oct 05 '11 at 02:00

aziz punjani · Answer 2 · 2011-09-22T20:00:58.007

0

You can pass in the x,y coordinates of where you want the dialog to open as an array i.e

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

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

edited Sep 22 '11 at 20:00

answered Sep 22 '11 at 19:55

aziz punjani

25,586
9
47
56

See my edited answer, you will have to experiment with the x,y coordinates to get it precisely where you want. – aziz punjani Sep 22 '11 at 20:01

score 0 · Accepted Answer · answered Sep 23 '11 at 13:04

I think what you have is almost correct. You just need to have my: 'left top', instead of my: 'center top' in the position method. Also, change .dialog("wid") to .dialog("widget"). I am guessing the latter is a typo at your side.

var target = $(this);
$("#div_").dialog("widget").position({
    my: 'left top',
    at: 'center bottom',        
    of: target     
});

See this in action: http://jsfiddle.net/william/dVZex/.

how to show JQuery-UI Dialog window beneath the radio button

3 Answers3