Modal window in web app

I have a web app with pages opened clicking on buttons. It doesn’t make any difference if the “open page in modal” property is set to true or false, as either way the new page opens replacing the previous page. I’m using Google Chrome Version 84.0.4147.89 (Official Build) (64-bit) and allow popups.

Is there something else that has to be set?

Modals always cover the whole page. On web the difference between opening as modal or not is that modal covers the navigation bar.

If you want to show only a partial modal over a page, you can make that modal to the initial page and toggle its visibility when you want to open a popup/modal. You can set Position to absolute in the container’s style tab Advanced properties section to make the popup appear where you want to over other content. This needs you to set enough z-index under Dimension and position section behind Position tab to the container. Then just use margins to put the container to correct place.

Tomi,
I don’t understand what you mean by:

Can you please explain it some more?
Your help is much appreciated

Sure :blush: In the Advanced properties section of any component you have Visible boolean telling if the component will be rendered on screen or not. You can use that to determine which parts of the page are visible and when. In this case, I’d suggest you to bind the visibility of the Popup modal you want to show to some Page variable.

image

Then you can use Set page variable flow function to set the page variable true or false depending on when you want that Popup modal to be visible.

1 Like

:+1:
Thank you. This gives me a whole lot of new ideas.

1 Like

@Tomi_Laakso @Mevi or @Harri_Sarsa

Ah, but is there a way to force the improvised modal (which was actually my first approach) to render centered on the screen? For example, if I have a profile page open with hundreds of posts loaded in, I can load in the modal (technically, a lightbox to expand post images, etc.) with show/hide functions. But if I’m all the down at the bottom and the modal container is set to 100% width and height, the actual image will load in at the top, requiring one to scroll unnecessarily long to reach it. Not efficient.

So any way to render the modal container just over the specific screen regardless of where the user is on the page? I’m still looking into this.

You should add all other page content into a Scroll view and make the Page Stretch to the viewport height. Then set Position of the modal absolute and it should appear above Scroll view content no matter how far you’ve scrolled.

1 Like