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?

  • 4
    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
    Commented Oct 23, 2013 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. Commented Oct 23, 2013 at 20:59

3 Answers 3


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


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:

enter image description here

  • Does this depend on how the modal is actually implemented? If you implement modal windows because the user has to complete an action first, then it doesn't make sense for them to have to complete a secondary action before that. However, if you implement modal windows to focus the user on a particular task, then stacking modal windows just turns their focus on a different task.
    – Michael Lai
    Commented Mar 10, 2015 at 23:57
  • In very complex workflows there are cases when it does make sense where primary action is a multi-action process, and a secondary action is one of required parts of that process. Seen this In ERP systems like SAP and Exact, for example as lookup/validation steps during the import process. Note: Any modal window limits user, and therefore is a bad user experience. It should be used only if absolutely required (because otherwise data integrity may break). And never just to focus user on a particular task. There are better techniques for that.
    – Slava
    Commented Mar 11, 2015 at 11:46
  • @Alph.Dev , can you specify them? > There are better techniques for that
    – Ricardo
    Commented Feb 3, 2016 at 20:55
  • 2
    @Ricardo This is a too big of a subject to fit in here, but the core principle behind most techniques to focus user on a particular task is to remove all distractions. Having a blank screen with 1 single action is unbeatable. Be it a step-by-step wizard, a non-modal pop-up window, disabling and fading out all other inputs, using color&contrast, merging multiple forms into one, redesigning workflow to perform secondary actions at another time, replacing confirmations with undo's... As long as you don't add new distractions, like a big arrow with text "Do this" (actually seen this on intel.com)
    – Slava
    Commented Feb 4, 2016 at 12:07

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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