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!

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.

  • 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 at 11:23
  • Thanks for your comments! I would definitely take them in consideration for my implementation ;) – Stefano Fenzo Aug 10 at 15:30
  • 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 at 22:16

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/

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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