Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
2  
I wouldn't literally stack modals, but having a user modal action prompt a confirmation isn't uncommon. For example, if you click on a user in Twitter and click on the "add or remove from lists" drop down a new modal replaces the user profile. In my opinion, stacking modals is cluttered and looks like spam. Also, think about how this would look on mobile (if part of your target). –  glilley Oct 23 '13 at 19:38
    
Wish i could upvote your comment. I'm liking the twitter style of replacing the original modal with the confirm then bringing back the original modal. And yeah stacking looks and functions terribly and was the basis for my question. –  Corey Rothwell Oct 23 '13 at 20:59
add comment

2 Answers 2

up vote 1 down vote accepted

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.

enter image description here enter image description here

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.

enter image description here

share|improve this answer
add comment

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 it and 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 is doesn't have to be required to confirm. He may decide "Hey, thats 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:

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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