[WB] Solution to close a popup by click outside

Hi,

On most modern sites you can close a popup by clicking outside it.
I created a little hack to do the same in Webdev.
The mechanism of a popup is to place a div over the entire page using opacity to show the page underneath it with a ddw effect.
The popup itself is displayed inside this div.
Webdev does not assign an id to this div, so we have to find a way to recognize it.
What do we know about this div?
If we inspect the source of a page with an open popup, the div with ddw has a position top:0px and left:0px and it does NOT have an id.
So based on this we can determine with a reasonable certainty if it was clicked on.
I'm assuming there's no other element on the page with these properties.
The method shown below has the advantage that it closes any popup listed in the function, so perhaps it is a good thing there's no id.

The code is very simple, add this script to your page:

window.onclick = function(event) {
   var el=event.target;
   if (el.style.left==="0px"&&el.style.top==="0px"&&el.id==="") {close_Popup();} 
}

Next we need the close_Popup function, which is a WL browser function:

PROCEDURE close_Popup()
PopupClose(Popup_MyPopup)
PopupClose(Popup_MyPopup2)    //you can add more popups that you wish to close

As you can see, adding more popups to the close_Popup function will close those too. PopupClose will not generate an error if a popup is not open. But if you have more than one open at the same time, all listed popups will be closed.

Kind regards,
Piet



Edited 1 time(s). Last edit at 10/16/2018 04:19PM by pietvanz.

Hi Piet,

in the past, I have achieved the same effect without any JS code or event.

Just using one big cell dimensionned to cover the whole page, and in the middle of it, what looks like a popup (another cell by example)

The click code of the big cell just contain a test on the mouse position to verify that it's not in the small center cell.

Best regards

Fabrice Harari
International WinDev, WebDev and WinDev mobile Consulting

Free Video Courses, free WXShowroom.com, open source WXReplication, open
source WXEDM.

More information on [www.fabriceharari.com]

Hi Fabrice,

There are always many ways, that's what I like about Webdev.
Although a close by click outside should be a standard option.
I'll send a request for version 25 .

Kind regards,
Piet

Hi Fabrice,

BTW, I'm using your solution now, I adapted it a bit for use with a regular popup,
The problem with my solution was that onclick was not processed on IOS touch devices.
Apparently Apple decided that a div needs a cursor:pointer style to have a touch event and I cannot make that happen, at least not in a simple way.

Works fine, thanks for the idea!

Kind regards,
Piet