Modal: consider supporting stacked modals

That is – modals that can be opened from modals. The current thinking is:

  • we are very reluctant to support those as it is very, very bad UX
  • “real life” sometimes “requires” those anyway….

Will try to resist us long as possible before implementing stacked modals, but let’s have this issue to track interest / real-life usage scenarios.

15 thoughts on “Modal: consider supporting stacked modals

  1. I use modal for yes/no confirmation dialogs.
    However, if stacked modals aren’t supported this means you can’t have ‘normal’ modals with data entry which then uses modal confirmation dialogs. I guess one could argue data entry in modals are a bad UX?

  2. Not sure where you are at on this issue, but I agree multiple modals are needed. In my instance I’m working on an address component what when you click edit opens a modal (because the edit controls take up much more place than a read-only address displayed in the DOM), I don’t want to limit the component to only working outside of modals. In fact, I find it frustrating looking over the documentation that you are building an alternative implementation of Bootstrap.js, but treat modals so entirely different. I don’t understand why instead of using divs and modal classes, why we need to use templates and host it in a special tag somewhere in the modal. From what I can tell, none of your other controls are imposing a different design than the standard Bootstrap.

    I can understand you wanting to do it a particular way for ease of use for what you consider the common design pattern, but I can’t see the justification for eliminating my ability to stick my modals anywhere in my HTML DOM that I chose and open them anyway I please.

  3. Any updates on this? I would like to have the first modal included in the backdrop when the second modal is opened.

    Quick fix is to add the following style: Assuming the backdrops/modals are added correctly in the DOM
    .modal-backdrop { z-index:1050; }

  4. It’s not a great UI/UX, but it’s not that terrible. It’s done all the times with desktop applications. I recognize that it might be problematic, and I don’t know what’s involved with the scrolling issue, but it would be nice if this were straight forward to do for situations that call for it.

  5. The team I’m on has support use cases for stacked modals regardless of whether its good UI/UX. We’ve been using ng-bootstrap and love it so far – this is the only issue holding us up right now. I really hope support gets added for this – would be a shame to have to use a different library just because of this one issue.

  6. @firou1925 you add it just after opening a modal with “open” method (it returns modalRef).
    I don’t know though if this workaround is still working