Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal: nested Modal displays below main Modal

See original GitHub issue

Steps

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 GitHub Comments

1reaction

levithomasoncommented, Jun 22, 2017

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.

Semantic UI React

0reactions

levithomasoncommented, Mar 3, 2018

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.

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...

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?

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...

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...

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.