Jquery UI Dialog box not positioning

Question

So I've looked up on the jquery ui website and other similar stackoverflow questions at I'm just stuck/confused. My dialog box is just defaulting to the center no matter what I put in and whenever I put in code others seem to have done on here to fix it mine stops working.

My html:

<div id = "dialog-3"
     title = "How is this data aquired?">Any crime publically reported by a local police department is gathered and shown on the map!</div>

My JS:

$( "#dialog-3" ).dialog({
           autoOpen: true, 
           hide: "explode",
           height: 80
        });
$("#dialog-3").dialog(option, position) [25,25];
     });

Thank you in advance I'm very new to coding so sorry if this is a dumb fix.

Answer 1

Per the documentation:

Default: { my: "center", at: "center", of: window }

You are not actually setting the position, so it's displaying the default behavior. To remedy this, in either your getter or setter, set the position relative to a traditionally-positioned element.

$( "#dialog-3" ).dialog({
       autoOpen: true, 
       hide: "explode",
       height: 80,
       position: {
         my: "left top",
         at: "left+25 bottom+25",
         of: "#positioned-div"
       }
});

$("#dialog-3").dialog("option", "position");

-OR-

$( "#dialog-3" ).dialog({
       autoOpen: true, 
       hide: "explode",
       height: 80
});

$("#dialog-3").dialog("option", "position", {
         my: "left top",
         at: "left+25 bottom+25",
         of: "#positioned-div"
});

Good luck and happy coding!