iframeの親ウィンドウがスクロールするときに、iframe内でModalPopupを再センタリングするのを手伝ってください

StackOverflow https://stackoverflow.com/questions/812876

質問

iframeを含むWebページがあります(好きではありませんが、そうする必要があります)。クロスドメインのiframeではないため、心配する必要はありません。

iframeの親の幅と高さに基づいてModalPopup(オーバーライドされた AjaxControlToolkit.ModalPopupBehavior._layout メソッドから呼び出される)のセンタリングを行うjQuery拡張機能を作成しました。 iframeがページの中央になくても中央に見えます。特に、iframeを追加したWebページがquirksモードで実行されているので、これには多くの注意が必要です。

今、 AjaxControlToolkit.ModalPopupBehavior._attachPopup もオーバーライドしました。これにより、親ウィンドウがサイズ変更またはスクロールしたときに、iframe内のModalPopupが親ウィンドウの新しいサイズに相対してリセンターします。 。ただし、ポップアップを親ウィンドウの resize イベントにアタッチする同じコードは、親ウィンドウの scroll イベントでは機能しません。以下のコードとコメントを参照してください。

AjaxControlToolkit.ModalPopupBehavior.prototype._attachPopup = function() {
    /// <summary>
    /// Attach the event handlers for the popup to the PARENT window
    /// </summary>
    if (this._DropShadow && !this._dropShadowBehavior) {
        this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, null, null, this._popupElement);
    }
    if (this._dragHandleElement && !this._dragBehavior) {
        this._dragBehavior = $create(AjaxControlToolkit.FloatingBehavior, {"handle" : this._dragHandleElement}, null, null, this._foregroundElement);
    }        
    $addHandler(parent.window, 'resize', this._resizeHandler); // <== This WORKS
    $addHandler(parent.window, 'scroll', this._scrollHandler); // <== This DOES NOT work
    this._windowHandlersAttached = true;
}

スクロールイベントが機能しないのに、サイズ変更イベントが機能する理由を誰かが説明できますか?私を助けるための提案や代替案はありますか?私はjQueryを使用しているので、MSの$ addHandlerメソッド以外の何かを使用できる場合は問題ありません。ハンドラーを削除するには_detachPopup関数もオーバーライドする必要があるため、それを考慮する必要があることに注意してください。

ありがとう!

役に立ちましたか?

解決

Nevermind、quirksモードは再び私を噛みました。 documentElementが存在しなかったため、親からscrollTopの位置を取得できませんでした。切り替えました

$(top.window.document.documentElement).scrollTop();

to

$(top.window.document.body).scrollTop();

私のjQuery拡張機能のセンタリングコードで、これで満足です。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top