[Silk UI Web] Close Modal with button

Brandon Hop

Question

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

11 Feb 2016

Vera Tiago

Staff

Hi Brandon,

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

regards,
Vera

11 Feb 2016

1 reply

11 Feb 2016

Show thread

Hide thread

Brandon Hop

Vera Tiago wrote:

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

11 Feb 2016

MVP

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.

11 Feb 2016

1 reply

11 Feb 2016

Show thread

Hide thread

Brandon Hop

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.

11 Feb 2016

Samuel Jesus

Staff

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

11 Feb 2016

1 reply

12 Feb 2016

Show thread

Hide thread

Brandon Hop

Samuel Jesus wrote:

For each button, I created a different action:

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!

12 Feb 2016

Brandon Hop

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

12 Feb 2016

MVP

@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..

12 Feb 2016

Samuel Jesus

Staff

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

22 Mar 2016

Marcel M. Falcão

Hi guys, please give me a help with this question.

Between WebBlocks this behavior doesn't look pretty good.

My scenario, using an wizard steps, as which step is a different WebBlock and for the Modal is another one, the first step call WebBlock with Modal, but when I click on buttons, he never closes, only with mouse click out of Modal.

Both has actions("Yes","No"), just with Notify Action.

On Click of my Buttons ("Yes","No")

Method = AjaxSubmit
Validation = Client & Server

19 Jan 2018

1 reply

10 Feb 2018

Show thread

Hide thread

erik berg

Marcel Mendes Falcão wrote:

Hi guys, please give me a help with this question.

Between WebBlocks this behavior doesn't look pretty good.

Both has actions("Yes","No"), just with Notify Action.

On Click of my Buttons ("Yes","No")

Method = AjaxSubmit
Validation = Client & Server

I am also having similar issues with a Cancel button in a popup that contains a WebBlock (Cancel and Ok button are both in the webblock)

Method property is Submit Ajax, Is Default property set to False ==> On Click: Never called

Method property is Submit, Is Default property set to False ==> On Click: Called but is not closing as described by Brandon. My form has a RunJavaScript action in it to force a resize of the popup.

When the Submit action is pointed to an action that Notifies and the Notification handler calls the Popup_Editor_Close action, the popup remains open. Note the Notification handler action also is handling the notification generated from the Notification button and the same Popup_Editor_Close action does close the popup. The Ok button does call Popup_Editor_Notify while the Cancel does not.

10 Feb 2018

Juan Carlos Elorde

I am surprised that the modal doesn't have a function to close itself. Problem is that I am not really a JQuery/JS guy and although Samuel Jesus's answer is a bit weird and tricky, since it works, then I'll go for it. Thanks!

12 Sep 2019

Jorge Martins

MVP

Hi Juan Carlos,

The Silk UI Modal pattern does have standard ways of closing, and all three of them have already been described on this thread and are quite straightforward: (a) your user can either click anywhere outside the modal window or; you can provide them with a button that (b) uses the Submit method or, (c) uses the Ajax Submit method and the provided toggleModal action (if the Modal is closed it will open it, if the Modal is open it will close it - exemplified and described here).

13 Sep 2019

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines