[Silk UI Web] Close Modal with button

[Silk UI Web] Close Modal with button

  
Forge Component
(47)
Published on 11 Nov (4 weeks ago) by OutSystems Labs
47 votes
Published on 11 Nov (4 weeks ago) by OutSystems Labs
Hi everyone,

I am trying to use the modal as a confirmation of an action, a delete action for example. Opening the modal isn't a problem, but closing it however is a bit more of a challenge. At least closing it without clicking outside the modal, which is just working fine. Currently I am using the action switchModal (not sure if the name is right) to open the modal. In the modal itself I have two buttons, one which triggers the action and another which should close the modal. The 'close' button is directing to an action which has the same action as to open the modal, because of the name I thought that it just switched the modal back to it's closed state, but it isn't...

So my question is:

Is it possible to close the modal with an action?

Regards,
Brandon
Hi Brandon,

Not sure if I understood you correctly... do you want to close the modal with a button inside the modal?
(check this)
http://labs.outsystems.net/dublinpreview/Content.aspx#PatternModal

regards,
Vera
Vera Tiago wrote:
Hi Brandon,

Not sure if I understood you correctly... do you want to close the modal with a button inside the modal?
(check this)
http://labs.outsystems.net/dublinpreview/Content.aspx#PatternModal

regards,
Vera
 Hi Vera,

That it is exactly what I'm trying to achieve and the link you send was actually the inspiration to use the modal. But do you have any idea where to find the logic behind the Ok-button to close it again? Since the toggleModal action isn't doing it for me. 

If it ain't gonna work I think I will go back to the traditional confirmation message.

Thanks in advance

Regards,
Brandon
 
it's possbile, but you have to create some jquery yourself, since the togglemodal only toggles the dialog.
check the jquery of the toggle modal and alter it yourself.


J. wrote:
it's possbile, but you have to create some jquery yourself, since the togglemodal only toggles the dialog.
check the jquery of the toggle modal and alter it yourself.

 
 Let's dive into that, thanks for the input J.
 
Hello Brandon,

Actually, there is an easier way to do it.

The toggleModal opens or closes the modal, depending on the current state. However, it may even be simpler than that. Take a closer look to the following example.

As you can see, I created a modal, and I have 2 buttons that can close the modal: one with Ajax, and one with a regular submit:



For each button, I created a different action:



SUBMIT BUTTON (Yes_usingsubmit action)

Whenever you do a submit to a page, the page is reloaded, and with that, the modal, closes. So, unless  you are opening your modal on your preparation, the modal will remain closed.
With this in mind, since I want to close the modal, my "Yes_usingsubmit" action is actually empty:



AJAX BUTTON (Yes_usingAjax action)

If you prefer to do an Ajax submit instead, the page is not reloaded (you only refresh what you want), so, you need to close the modal. Since the modal is now opened, I'm using the toggleModal action to close it:



Please keep in mind that I'm only showing the way to close the modal. Besides that, you can have other businness logic on this actions.

Hope this information helps you, and please let me know if you need any more help.

Best Regards,
Samuel Jesus
Hello Samuel,

I have'nt had any time to try to use the javascript and as your solution seems a bit more simpler, I will try yours when I have the time. Thank you.

Regards,
Brandon
Samuel Jesus wrote:
Hello Brandon,

Actually, there is an easier way to do it.

The toggleModal opens or closes the modal, depending on the current state. However, it may even be simpler than that. Take a closer look to the following example.

As you can see, I created a modal, and I have 2 buttons that can close the modal: one with Ajax, and one with a regular submit:



For each button, I created a different action:



SUBMIT BUTTON (Yes_usingsubmit action)

Whenever you do a submit to a page, the page is reloaded, and with that, the modal, closes. So, unless  you are opening your modal on your preparation, the modal will remain closed.
With this in mind, since I want to close the modal, my "Yes_usingsubmit" action is actually empty:



AJAX BUTTON (Yes_usingAjax action)

If you prefer to do an Ajax submit instead, the page is not reloaded (you only refresh what you want), so, you need to close the modal. Since the modal is now opened, I'm using the toggleModal action to close it:



Please keep in mind that I'm only showing the way to close the modal. Besides that, you can have other businness logic on this actions.

Hope this information helps you, and please let me know if you need any more help.

Best Regards,
Samuel Jesus
 Hi Samuel,

Perhaps it might be a good idea to make the Cancel-button, to close the modal, an Ajax-submit next time... It worked fine, just forgot the Ajax-submit. Your input made me realise that, thank you!
 
@samuel issue with that solution is, it never checks if it's open or not. so it really only toggles.
which can be annoying sometimes..



Hello Joost,

I'm not sure I fully understand your question.
The toggle inverts the state of the modal: if it is opened, it will be closed (and vice versa).
Can you provide us an example of an usage were you need to know the current state of the modal ? 

Cheers,
Samuel Jesus