将jQuery对话框附加到文本字段，并在用户单击其他内容时使其消失？

我喜欢jQuery DatePicker小部件。当用户单击我的web应用程序中的日期字段时，用户会看到一个允许她选择日期的对话框，这对用户非常友好

更妙的是，约会挑选者如此低调。如果用户不想使用日期选择器，她可以自己轻松地键入日期。此外，当用户单击任何不是日期选择器的内容或将焦点转移到另一个字段时，日期选择器自动消失

我想做的是与jQuery对话框具有相同的功能。基本上，我想用一些小部件创建一个对话框，用户可以使用这些小部件为文本字段选择一个值

我希望在选中文本字段时，该对话框自动显示在文本字段下方。我希望它在用户将焦点转移到其他地方后自动消失

为了实现这一点，我在jQuery中的文本字段.focus事件中附加了一个处理程序，以显示对话框。那很好-

我已经尝试向.blur事件添加一个处理程序，以便在用户转到其他地方时自动关闭对话框。但是，仅打开对话框就会触发模糊事件，并将其关闭：-/

此外，我不知道有什么方法可以让对话框直接显示在文本字段下面，就像日期选择器一样

如何使jQuery对话框出现在文本字段旁边，并像datepicker一样适当地消失

首先，要使对话框显示在输入下面，请使用position:absolute和jQuery.offset方法查找相关输入的位置，以便为对话框的位置赋值。例如：

$('#input').focus(function(e){
    var $t = $(this),
        $d = $('#dialog'),
        to = $t.offset();

    $d.css({
        'position':'absolute',
        'top':to.top + $t.height() + 4,
        'left':to.left
      })
      .show();
});

在上面，我通过将输入的顶部值添加到输入的高度加上4px缓冲区来定位对话框

第二，要隐藏对话框，请将一个单击处理程序附加到文档，如果事件目标是对话框或输入，则该文档不会隐藏对话框。像这样：

$(document).click(function(e){
    if (e.target.id !== "dialog" && e.target.id !== "input") {
        $('#dialog').hide();
    }
}

---

我不能直接回答。 但我的第一次尝试是查看日期选取者是如何利用这个位置的

---

在我看来，小部件是在需要时动态生成的，而不是从一开始就放在那里。

如果您希望使用实际的jQuery UI对话框功能，这里有一种方法：

$('#main').find('input').click(function(e) {
    var $box = $('<div class="box" />').html('In dialog'); // make a dialog
    var xpos = $(this).position().left; // get position of clicked field
    var ypos = $(this).position().top + 20;
    $box.dialog({ // trigger the dialog
        position: [xpos, ypos], // position it relative to clicked object
        close: function() { // destroy on close for neatness
            $(this).dialog('destroy');
        }
    }).mouseleave(function() { // if you mouseout:
        $(this).dialog('close'); // close the dialog
    });
});

---

示例：

我的浏览器似乎为$'input'返回了16。高度，但$'input'。左侧未定义，顶部也未定义。$'input'.offset.left和.top如果用户使用[TAB]键离开文本字段，如何使对话框消失？您可以在模糊事件中触发关闭对话框。。。但听起来您正越来越接近工具提示类型的要求。