This question already has an answer here:

On the web, is it wise to allow a modal popup (B) to be opened from another modal popup (A)?

If modal popup B were to be closed, the user would again be viewing modal popup A.

I am asking as I can envisage some issues e.g. with dismissing the second popup, if the overlay is clicked do both modals close or just the second one? Would the user think that the first modal has gone or would they know they can return to it by closing the second modal? etc.

Example mockup:

  1. Modal A. enter image description here

  2. Modal B. Opens when 'button' is clicked in Modal A enter image description here

marked as duplicate by Koen Lageveen, JohnGB, Joshua Barron, ChrisF, 4rchit3ct Jun 8 '14 at 6:04

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

up vote 18 down vote accepted

In general, I use the following guidelines for using modals:

Is it focused? Every time you throw a modal in front of a user, you're disrupting their workflow. Disruption isn't always bad. Sometimes that's what you want. But you have to realize you're doing that and use it for your benefit. Items within a modal should self-contained. A good rule of thumb is that a modal should be used only when it's content is focused or can be shown on it's own page. Examples of this are Pinterest cards, Trello pins, or Behance posts. Notice that they're all self-contained posts, which can be deep-linked to, but all use modals in-line to focus the user's attention on one specific item. The user doesn't have to remember other items in order to interact with it.

Is it consistent? Without clear guidelines for when and how items like modals can be used, they can lose their effectiveness because they'll be used all over the place. Unfortunately a poor example of this is right here at Stack Exchange. On your user profile, your top-level menu contains links to "Edit • Privileges • Preferences • Flair • Apps", all of which take you other pages. The last item in that list, "My Logins", opens in a modal. This isn't consistent with how modals are used elsewhere to alert the user or help them focus on a task.

Is it overly complex? Using a modal on top of another modal is a big red flag that something broke down in your workflow. If your workflow requires a second modal, you probably have some bigger issues with complexity within your modal. Remember: some of the best use cases for modals are focused, simple content. Squarespace use multiple modals for when you add certain content. And while I love the product, this is the item I hate the most in the product. It's confusing and tedious.

Modals are a great tool. Their overuse can blunt their effectiveness in your workflow, though.

  • 1
    I'm consistenly putting discrete things into focus. Why? Because giving focus helps, when things are complex. But the whole thing shouldn't be overly complex, right? Because then I will have "bigger issues with complexity within my modals". I'm not sure if these guidelines can help me. Did I miss something? – armin Jun 10 '15 at 18:26

No never. Adding a second modal dialog over the first one is the equivalent of using pop-up window over pop-up window (and there's a good reason they where blocked in the browser and soon deprecated in web design). Instead try to guide your users through a modal dialog wizard with clear interface of what to expect next. User feel comfortable and trust the application when she knows what to expect next. Like the following example:

enter image description here

What

Lead the user through the interface step by step to do tasks in a prescribed order.

Use when

You are designing a UI for a task that is long or complicated, and that will usually be novel for users—not something that they do often or want much fine-grained control over (such as the installation of a software package). You’re reasonably certain that the designer of the UI will know more than the user does about how best to get the task done.

Reference: Designing Interfaces: Wizard

enter image description here

  • 1
    I agree 99%, but I think with a very pragmatic approach it could be done if the modals are 'upgraded' to cards and stacked, just like in the LinkedIn application for iPad. a2.mzstatic.com/eu/r30/Purple/v4/de/0a/a1/… - of course this is touch, but I believe this pattern should be possible to port to web as well. But anyway, the question is: are they still modals? – Dominik Oslizlo Feb 12 '14 at 8:40
  • @DominikOslizlo I Think they are since they block user from editing anything else, which is what a modal view do. – 4rchit3ct Feb 12 '14 at 10:05
  • 4
    "No never" sounds too limiting to me. Of course, modals should be used sparingly, but if they make sense, why not use them? I don't think your comparison to pop up windows is right, the problem of pop up windows is something completely different. So, I don't disagree that you should reconsider what you're doing if you get that second modal, but I don't agree with your reasoning. – Koen Lageveen Jun 7 '14 at 9:37
  • 1
    @BennySkogberg Yes but what about confirmation messages? For example lets say we have a modal for editing an item and it includes a delete button, a delete confirmation modal on this case IMO is considered good practice or atleast not bad practice – John Demetriou Jan 29 '15 at 7:14
  • 1
    I believe confirming deletion is always necessary as much as deletion undo. Personal opinion though. – John Demetriou Jan 29 '15 at 7:45

Modal windows are used when you want to create some form of dependency i.e stop user from doing other work until what is required in the modal is complete. If modal 2 could open from modal 1, it wouldn't be any different from the pop-up windows. So in my opinion, closing one modal to view another modal should be avoided in the first place. For any technical reason, if modal 2 overlays on modal 1, it should be seamless i.e. user shouldnt see two different modals. Closing modal 2 should close modal 1...imho.

It would need to be a different design just incase you want some kind of comparison/references between multiple windows.

A modal window is an added layer of complexity, distilled from the level below. If you add another layer your adding another layer of complexity (no matter how much content your layer contains).

What you are doing here is forcing the user to built your mental model and not her own.

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