我创建了一个弹出框类。每个弹出窗口可以有可变的内容,并且出现在可变的位置,这取决于打开时光标所在的位置,因此弹出窗口似乎是从单击的链接或按钮中出来的。
问题是如果光标太靠近边框,弹出窗口可能部分位于屏幕之外。要调整位置,我需要弹出窗口的宽度和高度。
我试过这个:
$("#" + div_id).show(400);
var off = $("#" + div_id).offset();
var t = off.top;
var l = off.left;
var h = $("#" + div_id).outerHeight();
var w = $("#" + div_id).outerWidth();
var docH = $(document).height();
var docW = $(document).width();
alert("t = "+ t + ", h = " + h + ", w " + w + ", l "+ l + ", docH " + docH + ", docW " + docW);
if ((t + h) > docH) {
var h_diff = (t + h) - docH; //difference (how much is hidden?)
var new_top = Math.max(10, t - h_diff - 10); //move it of the needed amout + 10 margin (but don’t go further than 10 from top border)
$("#" + div_id).css("top", new_top);
}
if ((l+ w) > docW) {
var w_diff = (l + w) - docW; //difference (how much is hidden?)
var new_left = Math.max(10, l - w_diff - 10); //move it of the needed amout + 10 margin
$("#" + div_id).css("left", new_left);
}
问题是outerWidth() 和outerHeight 实际上确实失败了,因为因为我使用show() 的动画版本,所以检索到的高度和宽度是最小的。我很确定这就是原因,因为如果我立即显示 div 一切正常。另外,添加警报以查看发生了什么,我发现弹出窗口仅在带有动画的警报之后出现(并且警报显示最小的宽度和重量),而如果不添加持续时间来显示()弹出窗口首先显示,警告框出现,显示正确的值。
有任何想法吗?