jQuery 弹出 div 位于我选择的元素旁边

Question

我正在寻找一个 jquery 库，它可以让我在我选择的元素下创建一个弹出 div。我正在寻找的内容与 the jquery ui date picker 非常相似，但默认情况下它不会有日期选择器。我希望能够将我的内容放入其中。

#textbox 下的弹出 #popout

Answer 1

这可行，但您必须再次单击文本框才能将其隐藏。虽然这可以很容易地解决:

<div id="divPop" style="z-index:500;position:absolute;display:none">
    Hello World! This is Popup Div.
</div>
<input id="txt" type="text" value="" width="200px" height="50px" 
    style="border:2px solid #ffeeee;color:#eeeeff;background-color:#aaeeaa"/>

<script type="text/javascript">
    $(document).ready(function() {
        $("#txt").popupDiv("#divPop");
    });
</script>

<小时/>

jQuery.fn.popupDiv = function (divToPop) {
    var pos=$(this).offset();
    var h=$(this).height();
    var w=$(this).width();

    $(divToPop).css({ left: pos.left + w + 10, top: pos.top + h + 10 });

    $(this).click(function(e) {
        $(divToPop).css({ left: pos.left + w + 10, top: pos.top + h + 10 });
        if ($(divToPop).css('display') !== 'none') {
            $(divToPop).hide();
        }
        else {
            $(divToPop).show();
        }
    });
};