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.

Very nice! :+1:

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

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

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:

:trophy::trophy:

1 Like

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

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>

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!

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

Looks slick!

Very beautiful
Happy to help

Slick!

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 !

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

Your getting flash with your customisation :wink:

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>

Beautiful! Thank you Robert!