# Close Popup View onBlur **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [July 22, 2022, 9:38pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238 "2022-07-22T21:38:57Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\ **Post date:** [July 22, 2022, 9:38pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/1 "2022-07-22T21:38:57Z")
I am making a context menu popup when the user right clicks. I am using system.perspective.openPopup to open the view where the user clicks on the screen. This works just fine. Now I want the view to close if the user clicks any where on the screen other then this popup view. If this were a modal I could use overlayDismiss but I dont want the screen to turn black when it pops up. Where can I put code that will tell the view to close when the user clicks any where on the page other then this popup view? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 23, 2022, 7:57am UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/2 "2022-07-23T07:57:28Z")
What you’re describing IS a modal, why don’t you want the darkened background ? Do you want your popup to be movable ? ---
**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\ **Post date:** [July 23, 2022, 3:51pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/3 "2022-07-23T15:51:46Z")
The darkening of the background makes the website not look like an actual web application. It makes the context menu appear more like a warning or message box, which it is not. It is a menu to allow the user to select an action to perform on the item that was right clicked. No I do not want the modal to be movable. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 23, 2022, 4:18pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/4 "2022-07-23T16:18:55Z")
> [@Jonathan](#): > > I am making a context menu popup when the user right clicks. It sounds to me that you're application won't have a standard web browser GUI. It means that your users will require training to use the application as the operation won't be obvious. I wouldn't recommend that. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [July 24, 2022, 3:08am UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/5 "2022-07-24T03:08:48Z")
![Screen Shot 2022-07-23 at 8.07.52 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8cd1ffa6188b03e6d22593c99c518a38ce6b5fa.png) COMPONENTS have an onBlur Event, but Popups do not. If you want your popup to close when a user clicks outside the bounds, your only option is to make it a modal. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 24, 2022, 10:17am UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/6 "2022-07-24T10:17:00Z")
I think the darkening of the background makes it clear that an action needs to be taken, but I guess you could embed your popup view in a bigger, invisible frame that would cover the whole screen and close it when clicked. There might also be a way to change the background color through css (potentially with an injection), if it can be selected. ---
**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\ **Post date:** [July 24, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/7 "2022-07-24T15:22:23Z")
I’m out my depth with CSS stuff but its selectable and changeable. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b9d72861b52b8f927aff36a471d8f7d7d767885b.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [July 25, 2022, 1:58pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/8 "2022-07-25T13:58:14Z")
Then you should be able to change its color with a css injection: create a style class, and in the background image property, type this: `} .modal {visibility: hidden;} {` This should hide the background frame of EVERY modal popup. If you need to target this one specifically, there are ways, but it might get a bit more trickier and I don’t have access to ignition to test it right now. If you want to change the color, make it more transparent, or whatever, replace the `visibility: hidden` by whatever css property you want (google will help you on this). ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 25, 2022, 2:53pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/9 "2022-07-25T14:53:10Z")
> [@pascal.fragnoud](#): > > If you need to target this one specifically, there are ways, Doesnt look like you'll be able to target this specifically per popup ☹ I cant test it either, but i see the `id:popup-ID` is defined **below** the modal, so looks impossible to me ---
**Author:** ![Jonathan](https://avatars.discourse-cdn.com/v4/letter/j/aeb1de/32.png) [@Jonathan](https://forum.inductiveautomation.com/u/Jonathan)\ **Post date:** [July 25, 2022, 4:58pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/10 "2022-07-25T16:58:14Z")
What I think this really needs to work properly is Mouse Events in the Session Events under Perspective. Then I could capture when the user clicks the mouse any where inside their session. When that happens a message could be sent by the Session Mouse Event onClick. Then I could setup a message handler to close the popup. What I have done for right now is setup onClick events on the root of all my views that could be open when the context menu popup is used. The onClick event for each of these roots sends the same perspective message of mouseClicked. Then my context menu view has a handler that will receive the message if open and then close the popup. ---
**Author:** ![Mehdi\_MECHEDAL](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@Mehdi\_MECHEDAL](https://forum.inductiveautomation.com/u/Mehdi_MECHEDAL)\ **Post date:** [October 7, 2024, 12:34pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/11 "2024-10-07T12:34:05Z")
Hello, This config works in v8.1.42. ![Screenshot 2024-10-07 143310](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/479716044ab697baf4e13d187017a91274cc2842.jpeg) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 7, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/12 "2024-10-07T13:05:40Z")
This is quite the old post 😛 The OP wanted it without the modal, or atleast without the background color. > [@victordcq](#): > > Doesnt look like you'll be able to target this specifically per popup ☹ > I cant test it either, but i see the `id:popup-ID` is defined **below** the modal, so looks impossible to me Note that what i said here, is now possible thanks to **recent** css selector `:has` Probably would look something like this: ( **untested** ) ```python .client-root:has(#popup-POPUPID) .modal {visibility: hidden;} ``` ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [February 20, 2025, 3:20am UTC](https://forum.inductiveautomation.com/t/close-popup-view-onblur/62238/13 "2025-02-20T03:20:37Z")
Thanks for this, I was able to utilize this with a minor edit. With visibility set to hidden it breaks the background dismissal functionality. But, just setting background color transparent instead works well. Now, in Perspective, I have a modal popup with background dismissal and no shaded background. ```python .client-root:has(#popup-POPUPID) .modal {background: rgba(0, 0, 0, 0);} ```