I tried to implement a modal window.
13 Likes
Beautiful.
Will love to see the code for that
Modal CSS animation code
★ Copy and paste to rich text.
★ Specify the animation time.
★The current default is 0.7 seconds.
★ Specify VISIBILITY with the check box.
<!--Modal-->
<div id="container">
<p>Modal<br>Modal alternative component.<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr></p>
</div>
<pre><span><style>
#container {
position: fixed;
top: 0;
left: 0%;
margin-top:0px;
width: 50%;
height: 100vh;
background: #999;
box-shadow: 5px 0px 5px rgba(0,0,0,0.2);
box-sizing: border-box;
z-index:5 ;
animation: move 0.7s; /*animation time*/
/*-----------------------*/
font-family: serif;
font-size: 1rem;
line-height: 1.5rem;
color:#fff;
padding: 10px 30px 10px 30px;
}
#container p::first-line{
font-weight: bold;
font-size: 2rem;
line-height: 2rem;
}
@keyframes move {
0% { transform:translateX(-100%); }
}
</style>
4 Likes
beautifull.
too complex for me in term of CSS as I don’t understand it enough so if it breaks I won’t know how to fix it.
may I ask about the position and code of the other buttons?
- the “top” buttin on the bototm left
- the “modal on/off” buttons
how did you shape and position?
1 Like
The app is ready to be copied.
Feel free to check the code used.
★ Mobile display has not been verified yet.
★ The CSS ID name and class name may change.
1 Like
CSS ID and class name are usually where I have a problem 
1 Like
Very impressive. Can you show or explain how you were able to modify the CheckBox component (pass2) to have a large target area and the appearance of a button? I don’t see any HTML option for that component in the Glide editor. I see that the Rich Text [Background] has the CSS that does this, but how do you relate the CSS to component to override the style?
Beautifully done.
1 Like
I think there must be a resource directory for native app components and style… but where can I see this in order to modify as you did here:
1 Like
Open a glide app in a web browser, and use dev tools to inspect.
Lots and lots of examples of CSS mods in this thread…
3 Likes
of course!
thnx
1 Like
Added “Button CSS” tab to Modal Window app.
I commented out a brief description of the code I used.
★ Specify VISIBILITY for each of the ON and OFF buttons.
★ Specify VISIBILITY for the element controlled by the button.
Have a nice day!
Added a style using CSS animation.
9 Likes
beautiful
1 Like
Wow, beautiful!
1 Like
thanks for this. One question, is there is way to change gap between the top text inner_a::before and inner_a::after? i would like to separate them further apart. (animation modal)
.box_a {
position: fixed;
top:0;
box-sizing: border-box;
width: 101%;
margin-left:-5%;
height: 1000px;
border-radius: 0%;
background: #33b8fa;
display: flex;
justify-content: center;
text-align: center;
animation: move 2s ;
}
@keyframes move {
0%{ clip-path: circle(10% at 100% 0); }
100%{ clip-path: circle(71.2% at 50% 50%); }
}
p.inner_a{
margin-top: 60%;
}
.inner_a::before {
font-family: serif;
content: 'Screen\A display\A';
white-space: pre;
font-size: 3.5rem;
line-height: 2rem;
font-weight: bold;
color: #fff;
}
.inner_a::after {
content: '\A by\A css animation';
white-space: pre;
font-size: 1.2rem;
line-height: 1.5rem;
color: #fff;
}
1 Like
“\ A” in the content is the code for line breaks.
The easiest way is to copy and paste the code of “\ A” written in inner_a :: before and inner_a :: after.
yes i figured it out yesterday, did a a lot of \A 
1 Like
OMG this is beautiful!!
Hi, is there a way i can customize the floating button, rather that display the icon, i want to show text