jquery outerWidth / Height因元素中的淡入而失败(jquery outerWidth/Height fails with fading in element)

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

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

我试过这个:

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

有任何想法吗?

I have created a popup box class. Each popup can have a variable content, and appears in a variable position, depending on where the cursor is when it is open, so that the popup seems to come out from the clicked link or button.

The problem is that the popup may be partially outside the screen, if the cursor is too close to the borders. To adjust the position I need the width and height of the popup.

I tried this:

$("#" + 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); }

The problem is that outerWidth() and outerHeight do fail, actually, because since I use the animated version of show(), the retrieved height and width are minimal. I’m quite sure that’s the reason, because everything works if I show the div immediately. Also, adding the alert to see what’s happening, I’ve found out that the popup appear only after the alert with the animation (and the alert shows minimal width and weight), while if do not add a duration to show() the popup is shown first, the the alert box appears, showing the correct values.

Any ideas?

最满意答案

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

希望这可以帮助

Since you are already using jQuery you can use the .poisition() method to accomplish what you are trying to do. http://jqueryui.com/demos/position/

Hope this helps

更多推荐

popup,窗口,电脑培训,计算机培训,IT培训"/> <meta name="description" co