Is it acceptable to open a modal popup on top of another modal popup?

  • 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

    In what situation should this be needed? I'm curious.

    You could just change the content of the first popup (or hide it and show the new without the user notice) to avoid the possible confusion.. Like Stackexchange "Flag" popups.

    I agree with many of the comments in this chain. I would just add that it also depends on the actions you're asking the user to perform. Depending, there are other ways of handling actions that may not require another modal, such as inline editing or the like: http://thevectorlab.net/flatlab/inline_editor.html

    @PaulvandenDool say you had a finance database application. You have a modal to create a new invoice, within which the user needs to select a customer. The user realises that the customer record hasn't yet been created, so clicks an "add" button to launch a modal to create the customer record, after which they return to the invoice creation modal (with customer now populated) and continue their work. There's no break in workflow. This flow is fairly common in enterprise applications.

  • Hynes

    Hynes Correct answer

    7 years ago

    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.

    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?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM