[Modal] scrolling modal + multiple modals

[gwokae]

jsfiddle result page

If I opened multiple modals and both parent (1st) and child (2nd) modal are .scrolling, the child modal will append after parent modal.

My workaround is forcing child modal's height lower than browser's height to avoid such condition. Is there any suggestion?

[jlukic]

I will have to postpone triage until after 2.0 launch, but marked for later review.

[startswithaj]

@jlukic could you explain the reasoning behind the "undetached" class. There are situations where you want to have multiple modals open each with their own backdrops/dimmer so you can bind click events to them.

In my specific use case I set detachable to false and i put the modal inside its own dimmer. But it applies this undetachable class that adds

.scrolling.undetached.dimmable .ui.scrolling.modal {
  position: absolute;
  left: 50%;
  margin-top: 3.5rem !important;
}

But its not really detached its just in its own dimmer.

The way I could see this being fixed is that when .modal() is called it traverses the dom tree up from the element to see if it is already inside of a dimmer or if its immediate parent is a dimmer. If it is it gets left where it is detachable or not.

Currently if detachable is true. AllowMultiple is true. You have 2 dimmers and you call .modal() it clones the modal dom into the other dimmer, and you get 2 sets of dom.

My current work around is

$modalWindow.modal
            allowMultiple:true
            detachable: false
$body.removeClass 'undetached'

[lauri-elevant]

I'm also having the same issue. I believe there should be an option to have the modal create it's own dimmer, overlaying what's previously on screen (be it some inline content or another dimmer/modal),

[jlukic]

The logic for supporting all possible variations of context, detached, undetached etc get a little murky. I have much more experience debugging the general case.

If anyone can contribute a specific test case that's acting peculiar I'd love to take a look.

[Aniel]

I have the same issue. Here is my test case http://jsfiddle.net/LLLLcpLL/