# CSS MessageBox

**URL:** <https://community.glideapps.com/t/css-messagebox/26741>\
**Category:** Community Resources\
**Created:** [May 13, 2021, 10:08am UTC](https://community.glideapps.com/t/css-messagebox/26741 "2021-05-13T10:08:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 13, 2021, 10:08am UTC](https://community.glideapps.com/t/css-messagebox/26741/1 "2021-05-13T10:08:45Z")

</div>

Hello,  
I needed a MessageBox, and since it doesn’t exist in glide, I did it with CSS.  
You can adapt it to your needs.  
For the demo, click on the “floating button” to make it appear.

When the “MsgBox” is visible, you normally can’t click anything else.  
Here is a small demo application.

> **[Demo MsgBox](https://demo-msg-box.glideapp.io/)**

EDIT : I retrieve a part of CSS in the community (but I no longer have the author), I just adapted with buttons.

---

<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:** [May 13, 2021, 10:23am UTC](https://community.glideapps.com/t/css-messagebox/26741/2 "2021-05-13T10:23:03Z")

</div>

Very nice! 👍

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [May 13, 2021, 10:29am UTC](https://community.glideapps.com/t/css-messagebox/26741/3 "2021-05-13T10:29:47Z")

</div>

Very useful, thank you for putting together and sharing 👏

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 13, 2021, 11:08am UTC](https://community.glideapps.com/t/css-messagebox/26741/4 "2021-05-13T11:08:21Z")

</div>

Great work - I’ll be putting this into my app 🙂 cheers!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 13, 2021, 11:13am UTC](https://community.glideapps.com/t/css-messagebox/26741/5 "2021-05-13T11:13:18Z")

</div>

Well done! First time I’ve seen this implemented successfully and beautifully complete with buttons/actions.

Glide should take note that this modal window screen would be an awesome addition. Even if something simple as an option to the “link to screen” action that I requested here:

> [@Modal "Link to Screen" option](https://community.glideapps.com/t/modal-link-to-screen-option/20261):
>
> You know what would be sweet? An option for “screen type” for link to screen action: “Full screen” (like it is now) or “Modal” which acts like a popup overlay…like this:

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [May 13, 2021, 11:39am UTC](https://community.glideapps.com/t/css-messagebox/26741/6 "2021-05-13T11:39:53Z")

</div>

🏆🏆

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 13, 2021, 4:01pm UTC](https://community.glideapps.com/t/css-messagebox/26741/7 "2021-05-13T16:01:59Z")

</div>

Following @Mark_Turrell remark, I made some adjustments for tablet / desktop mode

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [May 13, 2021, 4:13pm UTC](https://community.glideapps.com/t/css-messagebox/26741/8 "2021-05-13T16:13:36Z")

</div>

Cool - can you share your CSS? thanks!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 13, 2021, 4:24pm UTC](https://community.glideapps.com/t/css-messagebox/26741/9 "2021-05-13T16:24:16Z")

</div>

Normally I updated the demo app. but hey here are the CSS’s.

For Button Bar :

```
<div style ="position:fixed;
top: 150px; 
width: 95%;
max-width:680px;
opacity: 1;
margin-left: -10px;
height:180px;
background-color:#A0A0A0; 
border-radius: 10px;
border: solid 0.1em;
border-color:red;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
text-align: center;
z-index:0 !important;"
>

<h3><font color=#800000red>TITLE</h3>
<div style="white-space: break-spaces;"><font color=fefefe>DESCRIPTION
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: 0.4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 270px; 
margin-left:10px;
width:30%;
}

.fab-target >* {
display:none;
}

</style></span></pre>

```

For One button

```
<div style =" position: fixed;
top: 150px; 
width: 95%;
max-width:680px;
opacity: 1;
margin-left: -10px;
height:180px;
background-color:#A0A0A0; 
border-radius: 10px;
border: solid 0.1em;
border-color:red;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
text-align: center;
z-index:0 !important;"
>

<h3><font color=#800000red>TITLE</h3>
<div style="white-space: break-spaces;"><font color=#000000>DESCRIPTION
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: 0.4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 270px; 
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-58%, -50%);
width:38%;
}

.fab-target >* {
display:none;
}

</style></span></pre>
```

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [May 13, 2021, 9:51pm UTC](https://community.glideapps.com/t/css-messagebox/26741/10 "2021-05-13T21:51:04Z")

</div>

Beautiful. Did the same thing but didn’t figured out yet the buttons and you did this great. For sure adding it to my css.

Thank you!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 17, 2021, 1:54am UTC](https://community.glideapps.com/t/css-messagebox/26741/11 "2021-05-17T01:54:12Z")

</div>

Had an opportunity to use this tonight. Thanks again, @Manu.n

 ![Screen Shot 2021-05-16 at 9.53.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b9a1bb12d356915375a4c518f92eafa264e385f7.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 17, 2021, 2:13am UTC](https://community.glideapps.com/t/css-messagebox/26741/12 "2021-05-17T02:13:09Z")

</div>

Looks slick!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 17, 2021, 4:30am UTC](https://community.glideapps.com/t/css-messagebox/26741/13 "2021-05-17T04:30:28Z")

</div>

Very beautiful  
Happy to help

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 17, 2021, 5:33am UTC](https://community.glideapps.com/t/css-messagebox/26741/14 "2021-05-17T05:33:59Z")

</div>

Slick!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 17, 2021, 5:58am UTC](https://community.glideapps.com/t/css-messagebox/26741/15 "2021-05-17T05:58:57Z")

</div>

Funny, when it’s @Robert_Petitto , it’s always better!

For information:  
You can replace  
`background-color:#A0A0A0;`  
through  
`background: linear gradient (#FFFFFF, #808080);`  
or other color of your choice.

do like the boss !

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 17, 2021, 9:16am UTC](https://community.glideapps.com/t/css-messagebox/26741/16 "2021-05-17T09:16:10Z")

</div>

You can add an image to make it more professional 🙂

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8faa8ded1809868c129d0acfc8116cb60e2cff4e.jpeg)

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [May 17, 2021, 10:10am UTC](https://community.glideapps.com/t/css-messagebox/26741/17 "2021-05-17T10:10:39Z")

</div>

Your getting flash with your customisation 😉

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 19, 2021, 12:55am UTC](https://community.glideapps.com/t/css-messagebox/26741/18 "2021-05-19T00:55:02Z")

</div>

Do you mind sharing with this amazing gradient?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 19, 2021, 2:32am UTC](https://community.glideapps.com/t/css-messagebox/26741/19 "2021-05-19T02:32:45Z")

</div>

Nearly identical to @Manu.n

```auto
<div style =" position: fixed;
top: 300px; 
width: 94%;
left: 5.5%;
max-width:680px;
opacity: 1;
margin-left: -10px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<br>
<h3><font color=#fff>It's a new day!</h3>
<div style="white-space: break-spaces;"><font color=#fff>Claim your daily unicoins!
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: .4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-58%, -50%);
width:38%;
}

.fab-target >* {
display:none;
}

</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 19, 2021, 5:07am UTC](https://community.glideapps.com/t/css-messagebox/26741/20 "2021-05-19T05:07:26Z")

</div>

Beautiful! Thank you Robert!

[Next page](https://community.glideapps.com/t/css-messagebox/26741.md?page=2)