fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.52k stars 329 forks source link

[bug] modal `closable` set to `true` not closing #3030

Closed batata004 closed 3 months ago

batata004 commented 3 months ago

Please take a look at this simple code:

https://jsfiddle.net/sb05motp/

It opens a modal (closable set to false) and after 3 seconds it sets closable to true but I still cant close the window when clicking in the dimmer/dark region. Am I doing something wrong?

Also, when clicking in the dimmer region I see this error message in the console (using latest Chrome on Win11)

image

GammaGames commented 3 months ago

You're still recreating the modal, you have to change the setting:

$("#janela_mensagem").modal("setting", "closable", true);

https://jsfiddle.net/67a9kyj8/

batata004 commented 3 months ago

In some cases, I really want to recreate the modal because I want all the other settings reverted to default (for example, I may have set onHide event and now I want to set closable to true at the same time that all the other events/settings get reverted to the default).

Yet, this is still a bug, right? Because I call modal twice, but at the second time some settings (like closable) are not setted correctly. Or is it prohibited to call modal twice on the same element?

lubber-de commented 3 months ago

If you call modal(), given an object as first parameter, on the same element, you are always recreating the modal. It gets even worse when the modal is already in progress (shown). That's the reason for the console error, because it expects internal variables which are created once the modal is shown. But as you are recreating the modal while it is shown, the internal variables get reset to undefined, causing the console error. That said, It's not a bug.

So, if you need to recreate the modal, you can do so as many times as you want, but make sure the modal is hidden/closed. If you only need to change some internal setting at runtime, use the setting behavior (this works also when the modal is in progress/shown)

batata004 commented 3 months ago

@lubber-de @GammaGames So here is exactly my problem: I already opened a modal (it's already showing to the user). Now I need to change the onHide event. As you said in another thread, I cant change onHide after the modal is already showed and I also cant change onHide using setting feature. So how I change the onHide after I already opened the modal?

In my specific case, I showed the modal to the user and after the user interact with it (filling a form) I want the onHide event to be different depending on the answers the user provided in the form inside the modal.

So how do I change the onHide event after the modal is already displayed? I was trying to make a hack with closable but it didnt work, so I am back to the square 0.

lubber-de commented 3 months ago

@batata004 Here you are :) https://jsfiddle.net/lubber/gv6sudry/

You can change onHide while the modal is shown, but only via the setting behavior (which i explained in the other thread)

batata004 commented 3 months ago

Now I understood what you said! I was being stupid, I was not understanding how the logic worked! Now I do: if I need to change settings on an already opened modal, I need to use setting. Thank you so much for your patience with me !