jqueryjquery-uiattributesdynamic-values

dynamic x and y position Jquery dialog box

I've been researching this for a while but can't figure this out. I'm making a survey website where I track the position of a cursor. I need to also show a modal popup message with instructions - so far so good. the problem is that to close the modal popup, by clicking ok, the cursor will then be in a pre-set position. Long story short, I need to randomize the position of the modal popup, this is what I have so far:

var ypos = ["top", "bottom"],
    xpos = ["left", "right"],
    yrand = Math.floor(Math.random() * 2),
    xrand = Math.floor(Math.random() * 2);
var box_pos = ypos[yrand] + " " + xpos[xrand];
$('#modalUIWrap').dialog({
    modal: true,
    resizable: false,
    autoOpen: false,
    width: 500,
    position: box_pos,
    buttons: {
        "Got it!": function () {
            $(this).dialog("close");
        }
    }
});

when I get rid of either xpos or ypos in definition of box_pos it works fine, as it does when I directly declare the position to be "top left" or whatever, but not when I combine it. Any thoughts?

Solution

  • You have swapped around the values. The documentation suggests valid string values are "[xpos] [ypos]".

    Note how this fiddle's position is correct: http://jsfiddle.net/Q4fFh/

    And how this one is not: http://jsfiddle.net/Q4fFh/1/

    Try simply swapping the values around:

    var box_pos = xpos[xrand] + " " + ypos[yrand];

    Off-topic: popping up modal dialogs at random places on the screen is likely to annoy the hell out of your users