Modals on top of modals

Question

Using bootstrap modals, I keep running into the issue of having an info modal with content inside of it, but there's a need to have a "confirm your decision" modal/popup on top of the initial modal.

E.g. I have a page with a list of users. You can click on a user to open a modal with user info inside of it. Then there will be maybe a "remove user" button in the modal that requires a "confirm remove user" modal.

Is it ever a good idea to have a modal on top of another modal or am I using modals wrong? Should I use actual pages instead?

Answer 1

When you say modal over modal, I'm assuming you're referring more to an alert box confirmation over the modal. As with my comment, I'm using the Twitter modal for viewing user profiles as an example because without any other info from your work, this is the most relevant case I can think of.

To answer your question, the modal seems like a reasonable application and has benefits over taking the user to a new page - the most essential keeping the users context. Modals are great for creating an area for self-contained tasks that focus a users attention. So, if these are your goals, a new page doesn't make sense. So, using a replacement modal for the confirmation/warning is a viable route.

With Twitter for example, users in the feed might spark your interest and you'd like to know a bit more relevant info without losing context of where you're at/what you're doing. It also doesn't require the user to fully commit, which would result in a completely new page.

Another suggestion is to use the undo pattern instead of a warning/confirmation. An example being gmail's undo prompt that appears after deleting mail. This saves a step from the user that acts with intention and saves other users from habitual clicks without reading or mishaps. This would be done within the original modal.

Answer 2

There is nothing wrong with the concept of modal window above another modal window. You only have to do it in an elegant way, so that the user doesn't lose the action chain logic and it won't be disturbing.

Some advices:

• Don't go too far with the amount of modal levels (try to stick to max:2)
• Use modal property ONLY when really necessary: when no other action is allowed before the action is completed. When confirming something, in most cases user is allowed to do other actions. In your example there may be a list of users, each with its own Remove button. When user clicks on Remove, he doesn't have to be required to confirm. He may decide "Hey, that's a wrong record, I actually want to remove the other one." So he may click the other Remove button, instead of being required to close the confirmation dialog first.

As for the provided example: The second dialog (confirm remove user) doesn't really need to be modal. Just a small popup with confirm/cancel buttons is enough. No need to block access to all other functionality. Something like this:

Answer 3

I would also suggest using a drop down menu to show the initial contact information as well as the option "remove contact". Then when the user selects that option now you show the modal to confirm that action.

Whenever I run into similar situations I try to use drop down or other types of menus to show information rather than using a modal on top of a modal.