# Closing popup based on viewport size changes

**URL:** <https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 14, 2025, 4:25pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444 "2025-10-14T16:25:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![clenselink](https://avatars.discourse-cdn.com/v4/letter/c/96bed5/32.png) [@clenselink](https://forum.inductiveautomation.com/u/clenselink)\
**Post date:** [October 14, 2025, 4:25pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444/1 "2025-10-14T16:25:39Z")

</div>

I’m trying to come up with a way for a popup to close based on the viewport size changing in browser and am not having any luck. Say your view port is 1920x800 and you drag your window and make it 1000x500, I want that change to be the trigger to close the open popup. I already have a method built to determine the size of the popup based on the view port but that only happens on open, if the popup is open and you change the window size it stays open and the only way to close it is refreshing the page. Any help would be great.

---

<div class="post-metadata">

**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:** [October 14, 2025, 4:31pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444/2 "2025-10-14T16:31:42Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4e6d978533ecd3cc185c3ef8ab14156cc67bc60.png)

---

<div class="post-metadata">

**Author:** ![clenselink](https://avatars.discourse-cdn.com/v4/letter/c/96bed5/32.png) [@clenselink](https://forum.inductiveautomation.com/u/clenselink)\
**Post date:** [October 14, 2025, 4:38pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444/3 "2025-10-14T16:38:41Z")

</div>

That only works if you click in the window

---

<div class="post-metadata">

**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:** [October 14, 2025, 4:41pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444/4 "2025-10-14T16:41:15Z")

</div>

🤷‍♂️

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [October 14, 2025, 4:44pm UTC](https://forum.inductiveautomation.com/t/closing-popup-based-on-viewport-size-changes/111444/5 "2025-10-14T16:44:38Z")

</div>

I’m pretty sure you can only detect the window size _ **change** _ with a media query. I’m not sure if you can do that from the advanced stylesheet, but I’d bet it would have to be javascript injection.

You are better off with a different design, maybe add a timeout on the popup to close itself after _x_ amount of inactivity.