# Modal not working properly?

**URL:** <https://community.weweb.io/t/modal-not-working-properly/5095>\
**Category:** Ask us anything\
**Created:** [October 27, 2023, 6:07pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095 "2023-10-27T18:07:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [October 27, 2023, 6:07pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/1 "2023-10-27T18:07:27Z")

</div>

Hey All. I have a modal dialog that’s working fine except for 2 things:

- The modal isn’t covering the entire screen (the header is still showing even though the modal is at the top of the Elements tree).

- Second thing is that I’m able to scroll the background page behind the modal. So the modal doesn’t seem to be modal at all. Any suggestions?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [October 31, 2023, 11:41am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/2 "2023-10-31T11:41:22Z")

</div>

What is the z-index of the navigation and the modal? The modal one should be bigger

And yes typically to prevent scrolling when a modal is opened you need to add overflow hidden to body with some js

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 2, 2023, 4:50pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/3 "2023-11-02T16:50:35Z")

</div>

thanks @luka The header was set to a higher z axis, so when I reduced that, the modal covered the header as expected. WRT needing JS to make the modal behave like a modal - that is a bug of the modal element IMO. @Quentin @flo @Joyce Weweb team should consider fixing that modal element so the page behind doesn’t scroll when modal is open…

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 2, 2023, 4:53pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/4 "2023-11-02T16:53:40Z")

</div>

@luka What JS specifically? I don’t know JS…

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 3, 2023, 10:57am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/5 "2023-11-03T10:57:58Z")

</div>

add this when opening the modal:

```auto
if (context.browser?.["environment"] != "editor") {
  wwLib.getFrontDocument().body.style.overflow = "hidden";
  wwLib.getFrontDocument().documentElement.style.overflow = "hidden";
}

```

and this when closing the modal

```auto
if (context.browser?.["environment"] != "editor") {
  wwLib.getFrontDocument().body.style.overflow = "auto";
  wwLib.getFrontDocument().documentElement.style.overflow = "auto";
}

```

this will only apply in the published app, if you want to test it in editor remove the if part

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 3, 2023, 10:58am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/6 "2023-11-03T10:58:44Z")

</div>

we are also going to update the modal element, in the meantime you can use the above solution

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 3, 2023, 2:08pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/7 "2023-11-03T14:08:34Z")

</div>

thanks Luka. I’m still building my app so its not published yet. Two questions about your reply:

1. Where _exactly_ do I add this code?
2. Do I just add **wwLib.getFrontDocument().body.style.overflow = “hidden”** when opening and **wwLib.getFrontDocument().body.style.overflow = “auto”** when closing?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 3, 2023, 2:22pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/8 "2023-11-03T14:22:38Z")

</div>

You have to also do the wwLib.getFrontDocument().documentElement.style.overflow too

You put it on the workflow opening the modal

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f90dda90a2e91b229a32f0573b977de0ab18fe0e.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2a967d76e2d7bccc4bc2aa422988fec86de8f5de.png)

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [November 3, 2023, 2:33pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/9 "2023-11-03T14:33:50Z")

</div>

Thanks so much for your help Luka. That answers question 1. Sorry for the noob question, but I don’t know JS. If I want to remove the IF statement temporarily to test in the editor, what would the correct JS be?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 3, 2023, 2:59pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/10 "2023-11-03T14:59:13Z")

</div>

```auto
wwLib.getFrontDocument().body.style.overflow = "hidden";
wwLib.getFrontDocument().documentElement.style.overflow = "hidden";

```

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [March 12, 2024, 5:57pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/11 "2024-03-12T17:57:05Z")

</div>

@luka Was the modal element ever updated to fix this or do we still need to add the JS?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [March 12, 2024, 8:50pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/12 "2024-03-12T20:50:35Z")

</div>

Still needs JS, i will make a ticket to add this option as an action in workflows

---

<div class="post-metadata">

**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\
**Post date:** [November 21, 2024, 8:00am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/13 "2024-11-21T08:00:51Z")

</div>

@luka is the action to prevent scroll of main page (body) when modal opened already available?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [November 21, 2024, 8:07am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/14 "2024-11-21T08:07:30Z")

</div>

No, you need to do it with code for now like mentioned above

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [December 29, 2024, 1:21am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/15 "2024-12-29T01:21:55Z")

</div>

@luka I am noticing that my sticky top nav bar is no longer sticky after opening and closing a modal that has this custom JS applied. Any way to fix that please?

https://www.loom.com/embed/3e339fc9c0944ed0af2dd8b97df195b8?sid=3c90c355-5a01-4c3a-b31b-4246e2e873ce

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [January 9, 2025, 6:55pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/16 "2025-01-09T18:55:38Z")

</div>

@luka Any ideas please?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 9, 2025, 10:22pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/17 "2025-01-09T22:22:02Z")

</div>

Were releasing the new Dialog tomorrow which can replace your Modal. I will dm you once thats live so you can test it

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [January 9, 2025, 10:25pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/18 "2025-01-09T22:25:47Z")

</div>

Awesome thanks!

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 10, 2025, 10:29am UTC](https://community.weweb.io/t/modal-not-working-properly/5095/19 "2025-01-10T10:29:56Z")

</div>

It’s [live](https://x.com/lukaivnvc/status/1877661663307944414), let me know if it works for you.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [January 13, 2025, 8:17pm UTC](https://community.weweb.io/t/modal-not-working-properly/5095/20 "2025-01-13T20:17:28Z")

</div>

@luka Thanks, but changing over to a new element would have been a LOT of work for me. Thankfully ChatGPT helped me solve it, after a lot of trial and error. This is what I ended up with, the change being to force layout recalculation on modal close:

**Modal Open**

```auto
const frontDoc = wwLib.getFrontDocument();
frontDoc.body.style.overflow = "hidden";
frontDoc.documentElement.style.overflow = "hidden";

```

Modal Close

```auto
const frontDoc = wwLib.getFrontDocument();
frontDoc.body.style.overflow = "auto";
frontDoc.documentElement.style.overflow = "auto";
frontDoc.body.offsetHeight; // Force layout recalculation

```

[Next page](https://community.weweb.io/t/modal-not-working-properly/5095.md?page=2)