CSS MessageBox

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.

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

22 Likes

Very nice! :+1:

1 Like

Very useful, thank you for putting together and sharing :clap:

1 Like

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

1 Like

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:

7 Likes

:trophy::trophy:

1 Like

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

1 Like

Cool - can you share your CSS? thanks!

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>
12 Likes

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!

1 Like

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

12 Likes

Looks slick!

1 Like

Very beautiful
Happy to help

1 Like

Slick!

1 Like

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 !

11 Likes

You can add an image to make it more professional :slight_smile:

7 Likes

Your getting flash with your customisation :wink:

2 Likes

Do you mind sharing with this amazing gradient?

Nearly identical to @Manu.n

<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>
8 Likes

Beautiful! Thank you Robert!

1 Like