making a popup disapear/ close after clicking outside of the pop-up box

1
Hi there,   I would love to see a solution for the following case. When there is a pop-up opened, we can only close it by a close action inside a button.  But is there also a way to close the pop-up if you click outside of it?   
asked
2 answers
0

I don’t think such option is available out-of-the-box. But you can do it using JavaScript. Use JavaScript snippet widget to add JavaScript on the page where modal is displayed. Then you can do something like this to close the modal when clicked outside. You will need to add a custom class to your popup/modal, then call fadeOut on it. I guess it will work. Or you may try display = none. There are lot of JavaScript solutions available on the stack overflow. 
 

$("body").click(function(){ $(".popupClass").fadeOut(); });

 

answered
11

Hi!

 

I just wanted to add another solution to this older topic because more people might need this to work without custom Javascript! There is another really easy way that also let's you re-use your Microflows set on any of the close actions.

 

This trick happens inside of Mendix, no 'exotic' things are required. Incl. no more than 4 lines of very basic CSS that you can style inline or inside your UI module (whatever you prefer).

 

Here we go:

1. Go to your popup page and add an empty container (doesn't matter where on the page). Press right click, and select 'add widget'. Find the 'container' widget and place it inside your pop-up.

image.png

 

2. Doubleclick on the empty container to open its properties (btw, don't add any content to this container, it should stay empty!)

3. Go to the Appearance tab and scroll down 'Style' (I'm not a big fan of inline styling but if you don't have a UI module this would do the trick). Otherwise, use the 'Class' field to give it a class name that you can refer to in your custom styling. But for the sake of this tutorial I will add inline styling.

image.png

Copy this:

position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;

 

4. Now what you have is an empty container that has placed itself all over the screen, behind the popup content.

5. Add your close action to this empty container by adding an 'On Click Event'. For example, a beautiful close microflow with some custom rollback actions. Or an out-of-the-box close page will also do just fine :). I won't judge.

image.png

6. Notice how when you Run your application you can now click besides the popup (a hand cursor appears) and are able to close the page.

7. That's it! How cool and simple was that, right!?

 

Note: You can also style this container a bit more, such as, add a background-color for example. Just make sure not to add any of the popup's content inside the empty container. Also, if you want to use this 'special click container' on another popup page as well, you just have to copy and paste the empty container. Or, like a pro, create a reusable custom popup layout with the 'special click container' added to the layout, and use it throughout your app consistently.

 

Anyhow! I hope this helps a few folks. 

 

Cheers,

 

T.

answered