Create Modal/Pop Up that goes away on unfocus

Hey, I am currently trying to create a modal that goes away when you click off of the modal. In essence, I want to create a pop up dialog that appears while the rest of the screen is still clickable, and if you click on the other part of the screen, the dialog will disappear and whatever you clicked on would be triggered.

In my application, I have a bunch of buttons. When you click on a button, a new dialog/modal/pop-up appears with 3 additional buttons. While this pop-up is open, I want to add functionality where clicking away from the pop-up, it disappears. Additionally, if while clicking away from the pop-up, you click on another button, it should trigger that respective pop-up for that button as well. Ideally, when the pop-up is active, everything should still be active, but clicking away will close the pop-up.

I’ve tried looking through the documentation for this, but have not found anything useful. I’ve looked into DialogWindow and creating my own custom component. With a custom component, I have figured out how to make the pop up disappear when clicking away, but it doesn’t trigger the action if you clicked on another button. Any kind of help would be useful! Thanks is advance!

1 Like

Try CallOutBox: