Modal: nested Modal displays below main Modal
See original GitHub issueSteps
Following the docs example: https://react.semantic-ui.com/modules/modal#modal-example-multiple
Expected Result
Nested modal should display above main modal.
Actual Result
Nested modal is displayed below main modal.
Version
semantic-ui: 2.2.10
semantic-ui-react: 0.68.5
Testcase
Example straight from the docs link above: https://codepen.io/anthonygreco/pen/KqWKZP
Initially, I thought I had an issue with the way I was building the modals (without trigger props; CodePen here), but discovered the same issue occurred with the docs example – on CodePen at least – as it works fine in the docs.
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Multiple modals overlay - Stack Overflow
This works for every .modal created on the page (even dynamic modals) ... When solving Stacking modals scrolls the main page when one...
Read more >Bootstrap Modal Dialog showing under Modal Background
This setup works because there's no top level container above the modal that introduces it's own positioning root. Problem solved, right?
Read more >Bootstrap Modal - examples & tutorial
Modal is a responsive popup used to display extra content. That includes prompts, configurations, cookie consents, etc. Use MDB modal plugin to add...
Read more >Modal - Bootstrap
Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. Modals...
Read more >How to create multiple modals (Open modal popup ... - YouTube
Hi friends,In this video you will learn how to create Nested Modal Popup Box using Bootstrap5.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I don’t believe SUI core support multiple modals with multiple dimmers. Note their example here: https://semantic-ui.com/modules/modal#multiple-modals. There is only one dimmer.
Semantic UI
Note a single dimmer is used on the main modal.![image](https://user-images.githubusercontent.com/5067638/27293611-caacdb3a-54cb-11e7-8048-53c157fe5466.png)
Semantic UI React
Modals have new a new CSS layout based on flex box in SUI 2.3. This will change things soon once we update SUIR to support SUI 2.3. Please file new issues for current bugs.