Modal is closed when the click event is started inside the modal and ended on overlay

[rnuyts]

trafficstars

In our Ember application, we use ember-modal-dialog. Inside one of the modals, we have a slider control. If the user starts to click in the modal content and ends the click on the overlay, it closes the modal.

When I try the same operation in the examples (here : http://yapplabs.github.io/ember-modal-dialog/) it does the same.

Is there a solution to make it working like the Boostrap modals ? When the mousedown is triggered inside the modal and the mouseup is triggered on the overaly, the modal is not closed. If you want to close the modal, you have to do the mousedown and the mouseup on the overlay.

Is there a workaround to fix this behavior ?

Thank you in advance for your help

[spolloni]

would love to have a fix or workaround for this behavior as well.

[loxmys]

@remiuz, @spolloni You can use overlayPosition="sibling" for fix this

[rnuyts]

@remiuz, @spolloni You can use overlayPosition="sibling" for fix this

Hi @loxmys, we tried the overlayPosition="sibling"and it fixed the problem of drag and drop. The problem is that we use sometimes two stacked modals and setting the overlayPosition to sibling seems to break the stack-ability of the modals.

overlayPosition="parent" :

overlayPosition="sibling" :

Any idea if there is a solution to make it working with the "sibling" as overlay position ?

[vfuto]

You shouldn't use nested modals (modal in modal).

In the Bootstrap docs, it says

Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

The solution should be swapping out the modals in the view: closing child modal will open back up parent vice versa.

[MariannaAtPlay]

overlayPosition="sibling"

We are running into this issue as well. I tried the suggested workaround, but it didn't make a difference. Are there any plans to fix this issue?

[rtablada]

Using overlay position does prevent the closing (depending on some CSS hierarchy) though it seems like there should be a better native event listener to make sure that this is happening.

I tried to modify the actions to see if there was a quick work around by extending the component. I think that it is likely that to fix this there may need to be explicit listeners for mousedown and mouseup to determine if the click began on the modal and ended on the overlay.