5

I'm currently working in a web app for technology transfer offices and I've been avoiding at all costs to display a Modal window over another one that's already open.

To give more context, there is a file management component that basically allows you to upload or attach existent files in several sections of the web app, this component always appears as a modal window.

The dilemma I have right now is that I have another component that allows you to post "activity entries" (is a simple WYSIWYG text editor) which also appears as a modal and it has an option to attach files, so when you click the "attach file" button it should call the file management component in order to choose or upload the file you want to attach to that entry.

It is a capital sin to show a Modal Window over another one that is already open?

It would be better to extend the first Modal window and show both components at the same time (at least during file selection)?

Is there any guidelines from existing design language/system? Thanks!

Improve this question
3

3 Answers 3

Reset to default
2

I create many apps that over lay one modal over another.

Example: There is an underlying app where business users choose among programs. They select one and a modal appears that covers 90% of the screen (using desktops with the app consuming a fixed with of 1600px)

In the modal the users fill out information regarding said program. And, there are numerous times when, in the course of filling out this information, that another modal is used.

It functions well. The users have work to do in these modals. When the work is completed (which must be done before continuing) they confirm that the data is acceptable and then return to the previous "page".

These modals, in a server-based, early 2000 environment, would have required new page loads. We don't need that today.

EDIT:

The image below shows two levels of modals (plus the originating screen). The first (bottom) layer displays programs. Then a modal appears for users to work on program lines; then finally (the top layer) the user may need to do in depth calculations on the program line. (The tools have been redacted.)

On this calculation level there are alerts, confirmations, etc...

enter image description here

Improve this answer
4
  • I would guess the main concern would be making sure that the second modal stands out sufficiently from the first... if both modals could be shown directly over the main screen (and are designed to stand-out from that), it might mean that if one modal is shown over the other, the difference isn't as clear you'd want it to be.
    – TripeHound
    Aug 10, 2018 at 11:23
  • Thanks for your comments! I would definitely take them in consideration for my implementation ;)
    – Stefano Fenzo
    Aug 10, 2018 at 15:30
  • 1
    Do you think your use case would apply to the context of the OP's situation? If you can provide some screenshots that would be great to help illustrate your answer as well :)
    – Michael Lai ♦
    Aug 10, 2018 at 22:16
  • @MichaelLai - I was less concerned with the OP's problem than in answering the question about stacking modals.
    – Mayo
    Aug 15, 2018 at 13:11
2

Well, as you have pointed modal views are not meant to be placed over another modal view as it's not really good, considering usability.

However, when using WYSIWYG, it's the best advice to have a separate page for editing.

This is because modal views are not designed to have too many components and also they are made to complete a quick action, not to mention adding an attach file button that triggers another modal, that is too many things on a modal that's meant to be simple for ease of use and implementation.

Improve this answer
1

The modal creation was based off of a query question from the old days of prompt that came from the console for the browser. The idea was to ask the user for a confirmation of a simple question, addition of some data and the ability to proceed when the user interacts with it. Adding complexity of another interaction using the same experience would reduce the success of the workflow trying to be achieved.

https://www.nngroup.com/articles/modal-nonmodal-dialog/

Improve this answer
4
  • I went through Neilsen's objections. I normally agree with them but there are a lot of things that don't make too much sense in this particular article. Example the objection that it takes people out of their workflow. (What does taking a person to a new page do?) Why use modals instead of a new page? Ah. There can be reasons for that.
    – Mayo
    Aug 16, 2018 at 12:44
  • Is it truly beneficial to subject a user to animations, modal changes in a constant fashion. Perhaps the solution is always easier to have another view to display for additional context? Layering elements like skins to an onion seems to frustrate users just looking to get to content. And this is just my opinion.
    – thedude
    Aug 17, 2018 at 19:14
  • I think a lot of it is weighting in extra interactivity context for the user to realize, success of a single interaction is multiplied each instance of the "inception" additional interactions.
    – thedude
    Jan 13, 2022 at 19:37
  • @Mayo yes opening a modal interferes with a user's workflow.. but opening a page is even worse. I think nn is not recommending to create a new page but move the workflow into the page you're already on without a modal or use a non-modal dialog. If the interaction is complex enough to warrant a modal, then its complex enough to warrant a new page to help the guest focus on that complexity.
    – joshua.thomas.bird
    Mar 15 at 10:31

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.