Saturday, March 24, 2012

Modal Popup Trapped

Hello,

I have been playing with modal popups over the last couple of days, and I have noticed some odd behaviour when using them with some of our more complicated pages.

In particular, there is a problem when placing modal popups inside absolutely or relatively positioned div tags (Panels in this case).

The CSS for our wrapper looks like this:

.wrapper {
width: 790px;
margin: 0px auto 0px auto;
position: relative;
}

This makes our content nicely centered on the browser window. However, the modal popup cannot seem to "escape" and is offset by the left and top by the amount that the "auto" generates.

Changing the position to "static" fixes the modal popup, but now the page is no longer centered.

I would call this a bug, or at least a feature limitation. After looking over the .js code for modal popups, I would reccomend that perhaps on load, the popup div reorders itself in the DOM?

You can read more about the issues involvedhere.
Awesome, thanks!

No comments:

Post a Comment