Help me re-center a ModalPopup within an iframe when the iframe's parent window scrolls

Posted by Cory Larson on Stack Overflow See other posts from Stack Overflow or by Cory Larson
Published on 2009-05-01T19:28:29Z Indexed on 2010/05/11 11:04 UTC
Read the original article Hit count: 349

I have a web page with an iframe in it (I don't like it, but that's the way it has to be). It's not a cross-domain iframe so there's nothing to worry about there.

I have written a jQuery extension that does the centering of a ModalPopup (which is called from an overridden AjaxControlToolkit.ModalPopupBehavior._layout method) based on the width and height of the iframe's parent, so that it looks centered even though the iframe is not in the center of the page. It's a lot of tricky stuff, especially since the web page I added the iframe to runs in quirks mode.

Now, I've also overridden AjaxControlToolkit.ModalPopupBehavior._attachPopup, so that when the parent window resizes or scrolls, the ModalPopup inside of the iframe recenter's itself relative to the new size of the parent window. However, the same code that attaches the popup to the parent window's resize event does NOT work for the parent window's scroll event. See the code below, and the comments:

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;
}

Can anybody explain to me why the resize event works while the scroll event doesn't? Any suggestions or alternatives out there to help me out? I am working with jQuery, so if I can use something besides the $addHandler method from MS that'd be fine. Be aware that I also have to override the _detachPopup function to remove the handler, so I need to take that into account.

Thanks!

© Stack Overflow or respective owner

Related posts about modalpopupextender

Related posts about modalpopups