# Overlay / Popup / Modal window

**URL:** <https://community.glideapps.com/t/overlay-popup-modal-window/60415>\
**Category:** Ask for Help\
**Created:** [April 11, 2023, 2:26pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415 "2023-04-11T14:26:34Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 2:26pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/1 "2023-04-11T14:26:34Z")

</div>

I’ve searched through the community but can’t find anything.

Is there a way to automatically have a modal window / popup without it being trigger by an action?

I want to display a welcome message when customers first sign in and have a close button on this screen. This will trigger an action for a Welcome Email so I need it to be designed in this way.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 11, 2023, 2:40pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/2 "2023-04-11T14:40:14Z")

</div>

I don’t think there is any way to trigger an overlay without an action, but you could use tab visibility to get a similar effect. That is, have all tabs except one hidden by default, show your welcome message on that tab, and then use the button action to both trigger the email and set a column value in the user profile that reverses the visibility of all tabs.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 2:44pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/3 "2023-04-11T14:44:51Z")

</div>

You can create an HTML window to get the same result… use the template column and the visibility condition.

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 2:47pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/4 "2023-04-11T14:47:55Z")

</div>

What do you mean by HTML window? Using Rich text?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 2:48pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/5 "2023-04-11T14:48:09Z")

</div>

yes

 ![Screen Shot 2023-04-11 at 10.50.55 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/8/28089e3861bb331b598d4fbe0d8e65ea80901a9f.jpeg)

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 2:51pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/6 "2023-04-11T14:51:09Z")

</div>

Do you have a sample script you are willing to share?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 2:52pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/7 "2023-04-11T14:52:12Z")

</div>

I can write the code for you if you show me an example of how it should look like

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 2:53pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/8 "2023-04-11T14:53:22Z")

</div>

Just a simple modal box saying Welcome (I can change the text) with a close button. But the close button needs to trigger a glide action.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 2:56pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/9 "2023-04-11T14:56:15Z")

</div>

ok, give me 10 min

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 3:05pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/10 "2023-04-11T15:05:25Z")

</div>

Use in the rich text component, and add action to it… like set the USC column with any value, then set the visibility if this column is empty.

Copy this code:

```auto
<div style="
position:absolute;
z-index:22;
text-align:center;
color:steelblue;
font-size:50px;
line-height:100px;
font-family: poppins, serif;
top:0px;
right:15px;
width:350px;
height: 200px;
padding:0px;
border:solid 1px;
border-radius: 5px;
box-shadow: 0px 0px 10px;">
<b>Welcome</b>

<span style="
position:relative;
top:20px;
text-align:center;
color:grey;
font-size:17px;
font-family: poppins, serif;
cursor: pointer;
padding:6px 15px;
border:solid 0px grey;
border-radius: 8px;
box-shadow: 0px 0px 9px grey;"><b>CLOSE</b>
</span>
</div>

```

Duplicate this code to create a button to place inside … if you need it

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 3:23pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/11 "2023-04-11T15:23:35Z")

</div>

thanks Uzo but this isn’t working so great. it sits behind the text. also - how is the action triggered?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51419d66bf44b779c9906ddadeaa4a347cf34121.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 3:25pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/12 "2023-04-11T15:25:41Z")

</div>

Can I see what you did? Where did you paste it?

 ![Screen Shot 2023-04-11 at 11.26.07 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/a/4a1788e492a01f7829ff2fc65646fdb457e20567.jpeg)

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 3:29pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/13 "2023-04-11T15:29:03Z")

</div>

I’ve fixed the postion but moving the component to the bottom and repositioning it with the top and bottom settings. Can you just show me how to close it?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 3:29pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/14 "2023-04-11T15:29:38Z")

</div>

use visibility condition, and custom action

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 3:31pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/15 "2023-04-11T15:31:20Z")

</div>

yes but where’s the button to click? I don’t understand that part

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 11, 2023, 3:35pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/16 "2023-04-11T15:35:02Z")

</div>

the whole window is a button 😉 unless you want a separate one, you split my code into two rich text components…  
Copy my code again… I updated it.

---

<div class="post-metadata">

**Author:** ![Erwin\_Potgieter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwin_potgieter/32/53023_2.png) [@Erwin\_Potgieter](https://community.glideapps.com/u/Erwin_Potgieter)\
**Post date:** [April 11, 2023, 3:39pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/17 "2023-04-11T15:39:17Z")

</div>

Gotha - thanks for your help. Makes sense now

---

<div class="post-metadata">

**Author:** ![ebele54](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ebele54/32/19267_2.png) [@ebele54](https://community.glideapps.com/u/ebele54)\
**Post date:** [November 16, 2023, 5:07pm UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/18 "2023-11-16T17:07:57Z")

</div>

Hi Uzo

This is pretty neat stuff. Please can you help me with a similar code if I want to replicate this with an image instead?

Thanks

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 2, 2023, 3:15am UTC](https://community.glideapps.com/t/overlay-popup-modal-window/60415/19 "2023-12-02T03:15:38Z")

</div>

Yes, no problem.