Multiple Modals: Closing second modal by clicking dimmer does not work everywhere in dimmer if second modal is smaller than first one

[PhilippGrashoff]

Hi there,

if this text isnt explaining well enough, I will add a screencast:

1. This only occurs if more than one modal is opened and the second modal is smaller than the first modal.
2. If thats the case, clicking the dimmer to close the second modal does not work in the part of the dimmer that overlays the space of the first modal (second modal is smaller, so dimmer "grows" when opening second one. Inside the "grow" clicking to close does not work).

Suggestion: Fomantic UI has fixed the multiple modal issue too, we run our own fix. Try the fomantic fix and use it if it works well.

[ibelar]

Submit issue to Fomantic fomantic/Fomantic-UI#284

[PhilippGrashoff]

Hi, my bug is actually quite the contrary: Its about not being able to close the modal by clicking the dimmer. Will make a screencast

[ibelar]

@PhilippGrashoff - no need for screenshot. The bug is related and cause by onHide callback that is not process correctly when multiple modal. Just add to show it differently 😄

[romaninsh]

May be related - #436

[romaninsh]

@PhilippGrashoff does this work: http://ui.agiletoolkit.org/demos/modal2.php ?

[PhilippGrashoff]

Hi,

thats not my issue. Seems in this demo all 4 modals are closed at once. I use ATK4 UI 1.6.0, this version does not suffer from all modals being closed at once. Will try to test on develop.

[ibelar]

@PhilippGrashoff - I think I see what you mean. When saying that dimmer grow do you mean that dimmer should take up the space of the second modal open area? As if only the second modal would be use alone? And then clicking that grow region would close second modal only?

This is not current Modal behaviour in Semantic. You can try using the multiple modal demo on their site. https://fomantic-ui.com/modules/modal.html#multiple-modals. When you open the second modal, clicking on the first one in the back (what appear as the growing dimmer area) will not close the second one.

Perhaps this was working before using semantic and the way we implement the fix because positioning of multiple modal was bad. But I think this is the right behaviour now or at least the way it is implement in modal.

Let me know,

[PhilippGrashoff]

Hi,

finally we get together :) Should have made a screencast in the first place. Ok, if thats the implementation in Fomantic-UI, then thats the way it is. Its not a big issue anyway, will post it there and close here.
On the demo page you posted its way more visible as the first modal is dimmed in white and thus differs from the other dimmer. In my page both dimmers are black so there was no difference visible.

[ibelar]

Good that we understand each other now. But still this allow us to fine a bug in closing multiple modal via dimmer area in semantic. 😄

[GregoryR13]

Hello,

It works with that :

$('.coupled.modal').modal({ allowMultiple: true, closable: false });