Позиция JQuery Dialog рядом с текстовым полем

Question

У меня есть текстовое поле html, и я хочу, чтобы диалоговое окно jquery отображалось рядом с ним, когда я нажимаю текстовое поле типа «время». Например:

То, что я до сих пор:

HTML:
Time <input id="theTime" class="time" name="inputTime" type="text">

JQuery:

$(".time").click(function(e) {  
    $("#dialog-message").dialog({ 
    modal: false, 
    buttons: { 
     Ok: function() { 
     $(this).dialog("close"); 
     } 
    }, 
    position: $(this).position() 
    }); 

    $("#dialog-message").dialog("open"); 
}); 

Положение неправильно с указанным кодом. Мой диалог не отображается в правильном положении. Как я могу сделать это справа от текстового поля, как на картинке?

Answer 1

Это похоже на работу! position: { my: "left bottom", at: "right bottom", of: $(this) }

Answer 2

сделать диалоговое-сообщение с абсолютным позиционированием,

$("#dialog-message").css("position","absolute")