# Modal window

**URL:** https://community.glideapps.com/t/modal-window/22907
**Category:** Project Showcase
**Created:** [February 17, 2021, 4:35am UTC](https://community.glideapps.com/t/modal-window/22907 "2021-02-17T04:35:48Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 17, 2021, 4:35am UTC](https://community.glideapps.com/t/modal-window/22907/1 "2021-02-17T04:35:48Z")

</div>

I tried to implement a modal window.

> **[Modal Window](https://modal-window.glideapp.io/)**

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [February 17, 2021, 5:00am UTC](https://community.glideapps.com/t/modal-window/22907/2 "2021-02-17T05:00:38Z")

</div>

Beautiful.  
Will love to see the code for that

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 17, 2021, 6:20am UTC](https://community.glideapps.com/t/modal-window/22907/3 "2021-02-17T06:20:57Z")

</div>

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>
```

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [February 17, 2021, 6:36am UTC](https://community.glideapps.com/t/modal-window/22907/4 "2021-02-17T06:36:03Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 17, 2021, 6:57am UTC](https://community.glideapps.com/t/modal-window/22907/5 "2021-02-17T06:57:57Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [February 17, 2021, 7:06am UTC](https://community.glideapps.com/t/modal-window/22907/6 "2021-02-17T07:06:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [February 17, 2021, 2:29pm UTC](https://community.glideapps.com/t/modal-window/22907/7 "2021-02-17T14:29:34Z")

</div>

Nice and smart idea!

Thanks @hisashi.fujita

Saludos

---

<div class="post-metadata">

### Author: ![belzoni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/belzoni/32/20862_2.png) [@belzoni](https://community.glideapps.com/u/belzoni)
#### Post date: [February 17, 2021, 4:09pm UTC](https://community.glideapps.com/t/modal-window/22907/8 "2021-02-17T16:09:23Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![belzoni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/belzoni/32/20862_2.png) [@belzoni](https://community.glideapps.com/u/belzoni)
#### Post date: [February 17, 2021, 4:17pm UTC](https://community.glideapps.com/t/modal-window/22907/9 "2021-02-17T16:17:39Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/63d9ca4a51ef6dcbebb69c457f6121b76329f278.png)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [February 17, 2021, 4:21pm UTC](https://community.glideapps.com/t/modal-window/22907/10 "2021-02-17T16:21:42Z")

</div>

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…

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191):
>
> Hello, Glide community slight_smile With some glider we want to make a showcase with all the Most Beautiful Design App. Specially the App with a innovant or Nice Design ! If you think your App Match the topic be free to comment with some explanation of your app Regard Stan

---

<div class="post-metadata">

### Author: ![belzoni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/belzoni/32/20862_2.png) [@belzoni](https://community.glideapps.com/u/belzoni)
#### Post date: [February 17, 2021, 4:24pm UTC](https://community.glideapps.com/t/modal-window/22907/11 "2021-02-17T16:24:27Z")

</div>

🤦‍♂️ of course!

thnx

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 18, 2021, 12:52am UTC](https://community.glideapps.com/t/modal-window/22907/12 "2021-02-18T00:52:11Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [February 19, 2021, 6:38am UTC](https://community.glideapps.com/t/modal-window/22907/13 "2021-02-19T06:38:08Z")

</div>

Added a style using CSS animation.

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [February 19, 2021, 6:56am UTC](https://community.glideapps.com/t/modal-window/22907/14 "2021-02-19T06:56:08Z")

</div>

beautiful

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [February 19, 2021, 1:38pm UTC](https://community.glideapps.com/t/modal-window/22907/15 "2021-02-19T13:38:51Z")

</div>

Wow, beautiful!

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 9, 2021, 10:55am UTC](https://community.glideapps.com/t/modal-window/22907/16 "2021-05-09T10:55:45Z")

</div>

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; }
```

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [May 10, 2021, 11:04am UTC](https://community.glideapps.com/t/modal-window/22907/17 "2021-05-10T11:04:55Z")

</div>

“\ 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.

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 10, 2021, 11:19am UTC](https://community.glideapps.com/t/modal-window/22907/18 "2021-05-10T11:19:26Z")

</div>

yes i figured it out yesterday, did a a lot of \A 😃

---

<div class="post-metadata">

### Author: ![eltintero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eltintero/32/76520_2.png) [@eltintero](https://community.glideapps.com/u/eltintero)
#### Post date: [May 10, 2021, 10:02pm UTC](https://community.glideapps.com/t/modal-window/22907/19 "2021-05-10T22:02:36Z")

</div>

OMG this is beautiful!!

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 19, 2021, 4:10pm UTC](https://community.glideapps.com/t/modal-window/22907/20 "2021-05-19T16:10:15Z")

</div>

Hi, is there a way i can customize the floating button, rather that display the icon, i want to show text

[Next page](https://community.glideapps.com/t/modal-window/22907.md?page=2)