modal window - fixed or absolute

Question

I'm having a debate with colleagues about the way our modal windows work on our website. The two options are, fixed positioning - so that when the window pops up, it's stuck in the middle of the screen, no matter where you scroll.

The other option is absolute positioning - so that the window pops up to the middle of the screen and then stays at that point, if you scroll up or down it will go up and down with the rest of the page.

Pros for fixed

Window is always visible - the user has to interact with it, and cannot "loose" the window

Cons for fixed

Mobile view especially - but affects desktop too - If a mobile user wants to zoom in (not usually needed - as our site is fully responsive, so text/images should always be the appropriate size) the fixed popup will end up half off the page with no way of viewing the rest of it unless you fully zoom out again, making zooming in basically unusable.

If the modal window is too large to fix on the page - then the modal window needs to be scrollable, which is not great for usability IMO, plus on some mobile devices this function does not work very well and can make it harder to use.

---

Pros for Absolute

Scrolling is always the same - regardless of the modal height. Zooming is always the same - nothing unexpected occurs when zooming.

Cons for Absolute

It's relatively easy to loose the popup from view if it's small and the user is scrolling when the popup is shown.

If the modal window is very large it might end up showing the popup longer than the html page - very unlikely occurrence but I guess it's a possibility.

---

Notes

The absolute positioned window popups up at the current point that the user has scrolled to - so it never pops up off screen.

The modal window is built so that clicking on the darkened background will close the modal window, so regardless of positioning - the user can always close the window if they get lost.

I'm in favour of the absolute positioning as IMO the usability is far greater - the sticking point for this debate to keep coming up is the ability to loose the window when scrolling - however I think that issue is far less of a problem than the usability problems that occur with fixed positioning.

I can add some screenshots if needed, but wasn't sure they would actually help show off the issue.

Answer 1

The answer is, yes, go with absolute-positioned modal popup. You’re darkening the background content, so that should serve as a cue that a modal is present even if it’s scrolled out of view. However, I’d do a usability test to confirm this. Come up with a task or situation where the test users will scroll the modal out of view and see how easily they recover.

Actually, the real answer is change the code for the modal popup so the users can scroll/zoom but can’t scroll the pop-up away. Once a popup appears, scrolling is bounded so the pop-up remains at least partially in view. Of course, this may not be technically feasible, especially if you’re using someone else’s API.

No, the real real answer is to forget about modal popups. Just use a new page to show whatever would go in the popup. If some of the content from the “background” (previous) page is relevant for the popup, reproduce it (in read-only form) in the new page. This allows normal scrolling and zooming while the required content doesn’t scroll out of view. It also follows a standard interface that eliminates the need for users to learn and remember how to dismiss the new content (i.e., tapping on the darkened background versus using the back button). There’s no such thing as “too little content for an entire page.” If the whole page is nothing by a yes-or-no question, then, well, at least that will get the users’ attention, right?