Question

我已从以下来源下载了一个javascript日期时间选择器

http://www.rainforestnet.com/datetimepicker/download/sample.zip

我在asp.net表单中拖动了这个文件。现在单击日历图像，在位置

处弹出日历

position: absolute; 
left: -1px; 
top: 0px; 
width: 208px; 
border: 1pt solid rgb(0, 0, 0); 
padding: 0px; 
cursor: move; 
background-color: rgb(255, 255, 255); 
z-index: 100;

表示页面的开头。如何设置其位置与日历图像有关，即无论何处放置此图像，弹出窗口仅出现在此图像

Answer 1

如果您将位置绝对与顶部和左侧一起使用，则该位置在页面上是绝对的。但如果在具有position：relative的元素中使用position绝对值，则该位置对于此元素是绝对的

不要使用top和left或尝试：

<div style="position:relative">
   <img src="images2/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
</div>

Answer 2

我推荐使用固定而非绝对的位置，因为这会将弹出窗口绑定到窗口，而不是父元素。在显示弹出窗口时，您将顶部和左侧属性设置为图像的偏移量以及弹出窗口所需的偏移量。

简单的jquery：

popup.offset(image.offset());

我运行此功能（需要jquery）。它将位置设置为锚元素的位置，如果元素太靠近窗口底部，则调整弹出窗口：

function showPopup() {
    var offset, difference;
    offset = image.offset();
    popheight = popup.height();
    difference = Math.min(0, $(window).height() - (popup.height() + offset.top + 15))
            // the diffrence betwenn the bottom edge of the popup, and the windows lower edge (+15 to add a bit of space)
    if (difference < 0) {
        offset.top += difference;
    }
    popup.offset(offset);
    screenCover.show().click(hidePopup);
}

最后一行的screenCover是一个全屏div我用来捕捉弹出窗口的点击（因为我的弹出窗口需要用户交互）

hidePopup功能：

function hidePopup() {
    popup.hide();
    screenCover.off('click').hide();
}

如何在javaquery中将弹出窗口和图像绑定在一起？

2 个答案: