1

ポップアップ ボックス クラスを作成しました。各ポップアップは可変コンテンツを持つことができ、ポップアップがクリックされたリンクまたはボタンから出てくるように見えるように、開いているときのカーソルの位置に応じて可変位置に表示されます。

問題は、カーソルが境界線に近すぎると、ポップアップが部分的に画面の外に出る可能性があることです。位置を調整するには、ポップアップの幅と高さが必要です。

私はこれを試しました：

$("#" + 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をすぐに表示するとすべてが機能するため、それが理由だと確信しています。また、アラートを追加して何が起こっているのかを確認すると、ポップアップはアニメーション付きのアラートの後にのみ表示されることがわかりました (アラートは最小限の幅と重さを示します)。が最初に表示されると、警告ボックスが表示され、正しい値が表示されます。

何か案は？

4

1 に答える 1

0

すでに jQuery を使用しているため、.poisition() メソッドを使用して、やろうとしていることを達成できます。 http://jqueryui.com/demos/position/

お役に立てれば

于 2012-08-08T22:52:06.627 に答える