# Prevent scrolling on page when i have my overlay modal is opened **URL:** \ **Category:** How do I?\ **Created:** [July 16, 2025, 5:45pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252 "2025-07-16T17:45:26Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 16, 2025, 5:45pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/1 "2025-07-16T17:45:26Z")
Hello, WeWeb modal will not do the job in my situation because i need to make it component, and when you make it component you cant trigger the modal from outside. Not with Execute component action or with Toggling Modal - Open variable. So i am making my modal and everything ok except that when i open my modal i can scroll page in background but i dont want this. How to prevent scrolling only when my modal with overlay is opened? Thank you in advance ---
**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\ **Post date:** [July 17, 2025, 11:53am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/2 "2025-07-17T11:53:17Z")
Hi Zoran 👋 You can call a popup from an external source with our new popup system by adding an action called “Open Popup” You can read more about it here: > **[Working with popups | Documentation](https://docs.weweb.io/popups/intro-to-popups.html#working-with-popups)** > > Learn how to create and manage popups in your WeWeb application Hope this helps ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 22, 2025, 5:13pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/3 "2025-07-22T17:13:40Z")
Hello, Thank you for answer. I have read this and there is no solution there. Because when i made component from WeWeb modal, after that i can not trigger modal in workflow with Execute component action or with Toggling Modal - Open variable. ---
**Author:** ![eslamomohamed](https://avatars.discourse-cdn.com/v4/letter/e/ecd19e/32.png) [@eslamomohamed](https://community.weweb.io/u/eslamomohamed)\ **Post date:** [July 23, 2025, 7:01am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/4 "2025-07-23T07:01:30Z")
You can try this solution when open modal or sidebar wwLib.getFrontDocument().body.style.overflow = “hidden”; wwLib.getFrontDocument().documentElement.style.overflow = “hidden”; when close wwLib.getFrontDocument().body.style.overflow = “auto”; wwLib.getFrontDocument().documentElement.style.overflow = “auto”; ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 23, 2025, 10:49am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/5 "2025-07-23T10:49:04Z")
Thanks But problem is that you can not even open the modal when you will make as component. If i can do this it will be easy. ---
**Author:** ![sam1](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sam1/32/6724_2.png) [@sam1](https://community.weweb.io/u/sam1)\ **Post date:** [July 23, 2025, 11:39am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/6 "2025-07-23T11:39:38Z")
What do you mean you can’t open the popup as a component? Can you show what your trying? ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 23, 2025, 12:08pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/7 "2025-07-23T12:08:28Z")
Hello, Its going like this: 1. I take WeWeb Modal which automatically have Modal - Open variable. 2. I place button and add workflow on this button to toggle Modal - Open variable or make workflow with Execute component action. Everything works ok. 3. I make this Modal as component(i need this) and here problems start. Modal - Open variable disappear and if you want to trigger modal with Execute component action you cant, because for Execute component action you need to select your modal from Component dropdown but Modal is not in list. If this is not understandable i will make video. ---
**Author:** ![sam1](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/sam1/32/6724_2.png) [@sam1](https://community.weweb.io/u/sam1)\ **Post date:** [July 23, 2025, 9:10pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/8 "2025-07-23T21:10:04Z")
sounds like your using the modal from the add panel they have a popups tab tho that are already components so use them instead. and they can be easily added to existing components to open them as well. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/218e1ff3bb7ec67f13afd2225018bbd03a5ed475.png) > **[Popup examples | Documentation](https://docs.weweb.io/popups/examples.html#popup-examples)** > > Learn how to create practical and useful popups for common scenarios in WeWeb here are the docs again > **[Working with popups | Documentation](https://docs.weweb.io/popups/intro-to-popups.html#opening-and-closing-popups)** > > Learn how to create and manage popups in your WeWeb application ---
**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\ **Post date:** [July 24, 2025, 4:59am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/9 "2025-07-24T04:59:08Z")
I’d agree with Sam to use pop ups if it suits your needs. If you really need the modal component you can do what you want but it’s stupid and clunky to setup. Essentially the open modal action is hidden from outside the component, so you have to make a component workflow in the component and then trigger the modal open action from there and then trigger that workflow from outside the component Here’s a quick example Find the component in the element tree ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/61c8ddf2b661ca6dca1ccbfe83ac379d6e310dfd.png) Click on the edit button on the right hand side panel ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0766fdac9b3ed4b5ed7884852f6d2fc22f5e6a1d.png) You can open up the modal this way if you want but the next step is what you need ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8b93dc683984b2d77925e013e210c8dbce52c6a3.png) You create a component workflow to trigger the modal component workflow ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/67cb95076680c0faee219f241e69c9b0207c427d.png) ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/260d601116b42fdc407a4458a00eba626bd4f994.png) Then create a workflow on whatever your using to trigger the open ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d77c2a70708f3102a02fe78890d0467e0c1ba662.png) ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 24, 2025, 11:37am UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/10 "2025-07-24T11:37:57Z")
Thanks. I will check and inform. ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 24, 2025, 2:40pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/11 "2025-07-24T14:40:54Z")
Thank you Sam1, Popup solved my problems for now. Hope will note come something new in my head that will make things problematic again 🙂 ---
**Author:** ![Zoran.Velinov](https://avatars.discourse-cdn.com/v4/letter/z/f1d935/32.png) [@Zoran.Velinov](https://community.weweb.io/u/Zoran.Velinov)\ **Post date:** [July 24, 2025, 2:42pm UTC](https://community.weweb.io/t/prevent-scrolling-on-page-when-i-have-my-overlay-modal-is-opened/19252/12 "2025-07-24T14:42:04Z")
Thank you for idea Yaj, I have solution now but i will keep in mind your idea if i need in future.