Modal window

I tried to implement a modal window.

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

CSS ID and class name are usually where I have a problem :wink:

1 Like

Nice and smart idea!

Thanks @hisashi.fujita

Saludos

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:

Screen Shot 2021-02-17 at 11.15.48 AM

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

:man_facepalming: 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.

7 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 :smiley:

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