Popup or modal?

I have a checklist, and I would like to display an overlay, popup, or new screen when an item is checked. Can you think of any ways to achieve this?

Toggling visibility might sort of work but it’s not ideal because I really want to direct the user’s attention to the modal and then have them click a button to hide it.

3 Likes

x2

1 Like

Any modal CSS workarounds @Lucas_Pires @Robert_Petitto?

1 Like

@theyih willing to watch a video in portuguese? lol you can use subtitles from youtube.

4 Likes

@theyih @wjcv06 @ThinhDinh I have this code in Ritual app.

Summing up, the way I do you gotta use this code :point_down:

<div style =" position: fixed;
 top: 40%; width: 90%; opacity: 1;
 background-color:white; border-radius: 10px;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 7%;
padding-right: 7%;
text-align: center;">
<h3><font color=red>TITLE</h3>

<font color=0e0e0e>DESCRIPTION
</div>

<bg><a style="position: fixed; width:100%; top: 0%; right: 0%; z-index:-1; opacity: 0.9">
<div style="background-color:#131313; margin: 0%; padding:100%;">
  • Create a Template column in Data and paste the code
  • Replace the fields TITLE and DESCRIPTION with the columns you want, or just write a title and description directly.
  • In the desired screen, add a Rich Text component and choose the column with the code.

Tip: To make the experience even better, add an image or whatever you want to “close” the pop-up with the increment action (e.g. a png X image), and set up all the components based on this increment.

10 Likes

This is so amazing. I will try this out today. I hope you come up with more and more functionality using HTML+CSS to look Glide Apps better. Thank you for sharing all those codes with Community.

2 Likes

Planning to do it more :blush:

1 Like

Hello,
Excellent.
If you allow me a little correction.
I replaced the “width: 90%” with "left: 5%; right: 5%; " for a better adjustment in full screen mode.

2 Likes

Actually any code it will be always the same. You change as you need in each app

1 Like

Excelent my friend! :+1:

2 Likes

Can this be done automatically every couple of days without having to click on a button?

Also can glide tell is a user has the app downloaded on their device?

No, Glide can not do that as of now.

What is your specific use case for this?

It would be for different instances, but I’m thinking of letting users know they can download the app, but it would be annoying if the user has it downloaded already since Glide can’t tell if its been added to their device.

Also, signups for newsletters, app updates, etc. Essentially any new or important information you want to send your users. Kind of like your standard website popup.

This would be tricky. Possibly we have to get a “Modals” sheet for this. You would only want to show one modal at a time, using @Lucas_Pires 's method so it would be structured like this:

Sequential Number (sheet column) | Notification Text (sheet column) | User-specific Done column (boolean - inside Glide)

1 | Download the app
2 | Signup for Newsletters
3 | App updates

I’m imagine about a data structure like that.

Then, you would want to build the Tab that shows the modal on top of the Modals sheet. Filter the screen by User-specific Done column is not True.

Would it work? Lucas, if you have any insights that you can share, please share.

2 Likes

Ohh! Thanks!

Is this an example of the data in the columns?

How would they popup? A user will have to click a button?

Yeah, a “button” to close the modal.

You can also implement an ON / OFF button using two check buttons.
★ Write the values of the two checkboxes to the user-specific column.
★ Write modal HTML & CSS in rich text.
★ Associates the modal VISBILITY with the value of the checkbox.

3 Likes

Here’s a quick example.

You can try it yourself/copy it back here.

3 Likes

Oh thanks!! I will look into this!

1 Like

Hi Thinh! Is there a way I can display this on top of a tab already created from the modals sheet? Also, what’s the image component for? Isn’t everything to display the popup being pulled from the rich text?

Thanks!