[bug] `closable` modal set to false is still closing

[batata004]

The documentation says is very clear that if I create a modal with closable set to false, it will not be possible to close it by clicking in the dimmer region. However, if for some reason I decide to set a custom code to onHide of the modal, then if I click in the dimmer region the modal closes.

You can check this bug here:

https://jsfiddle.net/ku9enhr7/

When the modal opens, click in the dimmer region (dark region around the white modal) and you will see the modal will close.

How can I prevent that? I know I can hack this problem returning false to the onHide function but then, if I try to close the modal using a button, it will not close.

[GammaGames]

If you put all the settings in one modal call it works:

$("#janela_mensagem").modal({
    closable:false,
    transition:"vertical flip",
    onHide: function() {
        //...some custom code here.
    }
}).modal("show");

https://jsfiddle.net/04xu9csy/

[lubber-de]

What @GammaGames said. In particular, you called the "setting" behavior before re-instantiating the modal by a given object, which in turn used the default closable: true then.

To keep your example as close as possible, just swap the object instantiation and the "setting" behavior and your issue is also solved https://jsfiddle.net/lubber/t5vra9xk/

[batata004]

Thank you so much guys but the problem is this: I need to change the onHide event on multiple parts of my app (there are at least 13 places where I set/change the onHide event. Also, in other parts of the code, I change other settings of the modal. If I call modal on a modal that was already initiated with modal it should preserve all other configurations previously assigned and just change what I need.

If this behaviour is not possible, then I kindly ask you: is it possible to just set the onHide event on a modal that was already created? I just want to change the onHide event without needing to initialize it all again, with all the settings that were already applied when the modal was first created. When using FUI I can easily set several configurations using "setting" without recreating a component. Is it possible to do with the onHide event?

Thank you all!

[lubber-de]

Yes, changing onHide via setting behavior works the same way See https://jsfiddle.net/lubber/t5vra9xk/1/

[batata004]

@lubber-de The jsfiddle you provided makes necessary to redeclare closable (for example, and all other properties already assigned to the modal) everytime I want to change the onHide. Cant I just set/change the onHide event without changing anything else in the modal? For example: I create the modal in a part of my code with closable:false and later, in another part of my code, I just want to set/change onHide without having to redeclare closable:false and all other properties already assigned when the modal was created. Is it possible to be done?

[lubber-de]

Yes, you can only provide the "onHide" setting/callback via the "setting" behavior.

You can decide whether you...

... want to provide a whole Object (like you already did to change mulitple settings at once)

$(".ui.modal").modal(
    "setting",
    {
      onHide: function() {
        $.toast({message: 'The NEW onHide'});
      }
    }
);

https://jsfiddle.net/lubber/t5vra9xk/2/

... or provide the single callback as function only

$(".ui.modal").modal(
    "setting", "onHide",
      function() {
        $.toast({message: 'The NEW onHide'});
      }
);

https://jsfiddle.net/lubber/t5vra9xk/3/

[batata004]

THANK YOU SO MUCH! WONDERFUL SOLUTION!