Modal not working properly?

Ask us anything
1

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?

2

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

3

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…

4

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

5

add this when opening the modal:

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

and this when closing the modal

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

6

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

7

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?
8

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

You put it on the workflow opening the modal

image
image892×712 28.2 KB

image
image890×396 28 KB

9

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?

10 
wwLib.getFrontDocument().body.style.overflow = "hidden";
wwLib.getFrontDocument().documentElement.style.overflow = "hidden";
1 Like
11

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

12

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

1 Like