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?

1 Like

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.

2 Likes

@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

Hi Tomi,

I can get the popup modal window to show using a page variable but how do I get the modal window to close itself?

In the case I have below I want the modal window to close itself with a cancel button:

Hi @Reece TL;DR You would invert/reverse the same logic formula you used to open it.

You would select that X icon in the popup, open it’s logic flow and drag a Set Page Variable into the flow and connect it with the Component Tap event. Set that variable controller to the same page variable that opens the popup, except set the value to Assigned Value to False. The result: A person clicks the X icon in the app and it sets the true/false page variable back to false, thus, hiding the popup.

It’s truly as easy as that. :slight_smile:

1 Like

Thanks for the reply Dominik!

Just last quick question. Whats the method here for setting the page variable on the initial page when the modal pop up window is in isolation mode?

1 Like

@Reece Easy enough. While in Isolation Mode, click the icon indicated in the picture to convert it into a regular container. I believe you can switch it back later, but I almost never build in Isolation Mode, generally. :thinking:

That would allow you to drag in conventional logic blocks like setting the page variables, etc.

1 Like

Ahh legend , didn’t realise you could build the pop ups outside of isolation mode.

Thank you very much!

1 Like

My pleasure. Good luck, mate.

1 Like

And, yes, I think Isolation Mode is more a preference kind of thing. It’s easy to misplace components if you’re not careful while building. It just puts a buffer there. Also, you can build your own and save them in a custom components list for easy access later, so I can see how they can help.

1 Like

Hey Tomi, So I’ve played around with this for a while. I’m trying to achieve this functionality by absolutely positioning a container outside of a scroll view, like you said. It seems to work fine on native, but on web the container acts as if it’s not absolutely positioned (scrolls with the rest of the content). Weird, considering it works on mobile, I’m assuming this is a bug.

Hey, @David_Juliano.

Consider these things:

  1. Have you built your scroll view correctly? Consider taking a look at the tutorial below and comparing your work to what’s described. Note: Composer’s UI looks a little different today, but the same principles apply.
    How to create a Sticky button? - #7 by Dominik_Greene

  2. Also, refer to Post #5 in the same thread for additional tips on positioning your pop-up.

  3. Off the top of my head, the most common problem seems to be folks forgetting to check Step #3 in the above tutorial regarding disabling scrolling and stretching to viewport height. Consider those.

  4. Lastly, consider screenshotting your page and settings to provide some additional context if the problem persists.

1 Like

Hey @Reece ,

we are also trying to achieve similar to your login popup. Can you please help us how can we achieve that popup over a page?

Thanks,
Bharti