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
13

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

14

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

1 Like
15

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

16

@luka Any ideas please?

17

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

2 Likes
18

Awesome thanks!

19

It’s live, let me know if it works for you.

20

@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

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

Modal Close

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