Question

我创建了一个弹出框类。每个弹出窗口都可以有一个可变内容，并显示在一个可变位置，具体取决于光标打开时的位置，以便弹出窗口似乎从点击的链接或按钮中出现。

问题是如果光标太靠近边框，弹出窗口可能部分在屏幕外。要调整位置，我需要弹出窗口的宽度和高度。

我试过了：

$("#" + 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，一切都会有效。此外，添加警报以查看正在发生的事情，我发现弹出窗口仅在带动画的警报后出现（并且警报显示最小宽度和重量），而如果不添加持续时间以显示（）弹出窗口首先显示警告框，显示正确的值。

有什么想法吗？

Answer 1

由于您已经在使用jQuery，因此可以使用.position（）方法来完成您要执行的操作。 http://jqueryui.com/demos/position/

希望这有帮助

jquery outerWidth / Height因元素中的淡入而失败

1 个答案: