JQuery dialog open next to button [closed]

Question

how to I position a jquery dialog so it opens right next to a button when clicked? (kinda like a drop-down menu)

Thanks in advance!

Answer 1

this is button click event

$('#myButton').click(function() {
  var x = $("#myButton").offset().left;
  var y = $("#myButton").offset().top;
  x += 100; // or whatever size of your button
  $('#myDialog').dialog({ position: { x,y}});
});

there is also in the Dialog Docs the ability to position relative to another element such as this.

$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button }

either one will work, but the first example shows you how to actually get the coordinates of the button that was clicked and then set a dialog next to it.

Answer 2

Thanks for the answer, Ohgodwhy!

Here for all others:

$('#dialog').dialog({
  position: { 
    my: 'top',
    at: 'top',
    of: $('#some_div')
  }
});