7

A pop-up modal on my website shows information. In the mobile version of the page, what could be a good replacement for a pop-up window?

I tried making the modal pop-up responsive, but the content inside looks cluttered and kills the UX.

  • In case of simple messages, I can replace them with a Javascript alert (in case of an alert message or a confirm message, but the alert cannot be styled).
  • I tried using an accordion and tabs, but this does not serve the exact purpose.

Is there a better option?

Improve this question

2 Answers 2

Reset to default
6

Consider a Full Screen Overlay

A pattern I see more and more is the full overlay. It utilizes the full screen, has a prominent 'close' button, and often uses a background color to communicate that it's not the standard view.

I've most often seen it used with navigation, but I don't see why you couldn't do more with it. It works in a responsive design, and at the smallest sizes gives you access to the full screen real estate while maintaining the mode switching feel of a modal window.

http://tympanus.net/Development/FullscreenOverlayStyles/

Sample fullscreen overlay

Here's the last place I remember seeing it: http://interaction16.ixda.org/

Improve this answer
3
  • This seems to be a good option , but can it substitute a modal popup which gives info and stuff? Have you seen it in mobile sites in place of popup? Just clarifying.
    – Sooraj
    Sep 24, 2015 at 5:54
  • I haven't, but I think as long as it's functional and doesn't hinder the user meeting their goals, then it's worth a few wireframes at least.
    – dennislees
    Sep 25, 2015 at 18:25
  • That IS a modal popup. Modal popup doesn't have a rule of not utilising the full screen...so your solution is popping up, and modal = modal popup o.0 It has the benefit of potentially making use of the screen realestate (which is quite important on mobile), but your example shows content not making use of that extra realestate o.0 And on mobile especially, clicking outside of a modal popup's region should close the popup, so you're killing that feature, making it extremely hard to close o.0
    – straya
    Apr 26, 2017 at 2:02
0

Consider a nonmodal dialog such as the Snackbar/Crouton pattern. It is much less offensive than a modal popup. Generally, avoid "solving" problems using popups - is the best advice I can give you.

Inline feedback goes a long way. Or just make a new page/screen, K.I.S.S.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.