Manu.n
May 13, 2021, 10:08am
1
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.
28 Likes
Very useful, thank you for putting together and sharing
1 Like
Great work - I’ll be putting this into my app 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:
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:
[image]
7 Likes
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>
14 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
14 Likes
Manu.n
May 17, 2021, 4:30am
13
Very beautiful
Happy to help
1 Like
Manu.n
May 17, 2021, 5:58am
15
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 !
13 Likes
Manu.n
May 17, 2021, 9:16am
16
You can add an image to make it more professional
9 Likes
Your getting flash with your customisation
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>
10 Likes
Beautiful! Thank you Robert!
1 Like