My Application allows users to upload photos (which uses the "File Upload" forge item). When the + Photo button is pressed it should prompt the user to pick a file which will then be uploaded via the "OnAttach" Action. This functionality works perfectly. 

It will then list the photos in the webblock. If you click on one of the photos it will open a popup window.

I want to be able to close the popup window by clicking outside of the window. 

I tried to implement a small piece of Javascript in an expression on the page. 


With the "Value" 

SyntaxEditor Code Snippet

"<script>

$('body').click(function(){
  RichWidgets_Popup_Editor_Close();
});

</script>"

This actually worked for closing the popup window with a click outside the popup, however it changed the functionality of the upload tool.

If no Photos exist in the list, the pop up editor will not display the file explorer to allow the user to select a file. However if a photo does exist in the list it will show the file explorer. 

There are no if statements or logic on the "Display" or "Enabled" fields for the button or the webblock. The tableList data source is an aggregate which finds relevant photos. 


Any suggestions would be greatly appreciated. 


Hey Christopher,

You could try to use Magnific Popup from the forge.


You can also create a div to overlay the background, styled with some opacity, and a click action to close the pop up. I just recently developed that patterns for a mobile app i am currently working on and it works great.

JT wrote:

You can also create a div to overlay the background, styled with some opacity, and a click action to close the pop up. I just recently developed that patterns for a mobile app i am currently working on and it works great.

Apologies for not getting this. I have added a Webblock with a Container with the following CSS

SyntaxEditor Code Snippet

.click-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
    color: white;
    text-align: center;
}

And then put the webblock in the Popup Layout, however it only covers the window, not the screen behind it?

The container is a link to a close popup action. 


I actually created that pattern for a custom tooltip, but the principle is the same:

I have a main div:

SyntaxEditor Code Snippet

.my-tooltip-backlayer {
    height: 100vh;
    width: 100vw;
    background: inherit;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
   -servicestudio-display: none;
}

That div covers the whole screen and has a onclick event, but a link works as well. 

Then, inside that div i created the tooltip itself:

SyntaxEditor Code Snippet

.my-tooltip {
    position: absolute;
    background-color: rgba(0,0,0,.77);
    display: flex;
    height: auto;
    padding: .3em;
    border-radius: 4px;
    z-index: 999;
    width: 80vw;
    color: #fff;
    -servicestudio-display: none;
    left: 10vw;
    top: 8vh;
}

Since its a pop up, i would positioned it more centered, this a code more specific to make the tooltip appear next to the icon that triggered the action, hence the position fixed and absolute.

JT wrote:

I actually created that pattern for a custom tooltip, but the principle is the same:

I have a main div:

SyntaxEditor Code Snippet

.my-tooltip-backlayer {
    height: 100vh;
    width: 100vw;
    background: inherit;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
   -servicestudio-display: none;
}

That div covers the whole screen and has a onclick event, but a link works as well. 

Then, inside that div i created the tooltip itself:

SyntaxEditor Code Snippet

.my-tooltip {
    position: absolute;
    background-color: rgba(0,0,0,.77);
    display: flex;
    height: auto;
    padding: .3em;
    border-radius: 4px;
    z-index: 999;
    width: 80vw;
    color: #fff;
    -servicestudio-display: none;
    left: 10vw;
    top: 8vh;
}

Since its a pop up, i would positioned it more centered, this a code more specific to make the tooltip appear next to the icon that triggered the action, hence the position fixed and absolute.

So if i understand correctly, this isnt using Outsystems Popup editor / Popup_editor_Close, its just a container that is displayed when required and will close when the tooltip-backlayer is clicked on?


Yes that's right

Is there a way to do this with the Outsystems stock popup functionality? Or potentially with more specific javascript than I have used?

I tried to use the Magnific Popup but it does not seem to behave the way I require. 


Did any of you try to follow the link Shashwat posted above? It even has an example Module.