Repositioning a ModalWindow in Wicket

Sakai renders the main content of a tool in the portlet iFrame, which can affect the positioning of ModalWindow’s in Wicket since the calculations are based around the height of the viewport, which is mucked up with an iFrame.
Here’s a workaround on how to reposition a ModalWindow component in Wicket.
1. Add these Javascript functions to your page:


function getScroll() {

if (document.all) {
// We are in IE
return top.document.documentElement.scrollTop;
} else {
// In other browsers
return top.pageYOffset;
}
}

function fixWindowVertical() {
var myWindow=Wicket.Window.get();
if(myWindow) {
var top = getScroll() + 50;
myWindow.window.style.top = top + "px";
}
return false;
}

2. In your handler that shows the ModalWindow, add an appendJavascript() to call the fixWindowVertical() function:

final AjaxLink showModalLink = new AjaxLink("modalLink") {
public void onClick(AjaxRequestTarget target) {
showModalLink.show(target);
target.appendJavascript("fixWindowVertical();");
}
};

This will show the ModalWindow, then shift it to 50px below the top of the current viewport, and works in iFrames. I have noticed a very tiny flicker between the original position and then the final position, but only occasionally, and if your page is tall enough the original position will be outside of the viewport so you won’t notice anything at all. Open to better suggestions that work in an iFrame though 🙂

For reference, this is being tracked in the Wicket Jira as WICKET-2059.

Advertisements

2 thoughts on “Repositioning a ModalWindow in Wicket

  1. Varun says:

    Thanks for the reply. Try the below one too. Working very good

    function fixWindowVertical() {
    Wicket.Focus.attachFocusEvent();
    var element = Wicket.Focus.getFocusedElement();
    var left = Wicket.Iframe.findPosX(element) + 60;
    var top = Wicket.Iframe.findPosY(element);
    var myWindow = Wicket.Window.get();

    if (myWindow) {
    myWindow.window.style.top = top + “px”;
    myWindow.window.style.left = left + “px”;
    }
    return false;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s