0

我从以下来源下载了一个 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;

表示在页面的开头。如何将其位置设置为与日历图像绑定，即放置此图像的位置仅在此图像上出现弹出窗口

4

2 回答 2

0

If you use position absolute together with top and left the position is absolute on the page. BUT if you use position absolute within an element with position:relative the position is absolute to this element

Dont use top and left or try:

<div style="position:relative">
   <img src="images2/cal.gif" onclick="javascript:NewCssCal('demo1')" style="cursor:pointer"/>
</div>
于 2013-11-14T10:25:05.480 回答
0

I reccomend using position fixed rather than absolute, since that will bind the popup to the window, and not the parent element. when showing the popup you set the top and left properties to be the offset off the image plus what ever offset you want for the popup.

simple jquery:

popup.offset(image.offset());

I run this function (requires jquery). it set the position to be that of the anchor element, and adjust the popup if the element is too close to the bottom of the window:

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);
}

The screenCover in the last line is a fullscreen div I use to catch clicks out side the popup (since my the popup requires user interaction)

the hidePopup function:

function hidePopup() {
    popup.hide();
    screenCover.off('click').hide();
}
于 2013-11-14T10:25:11.160 回答