Modal pages
Pages that slides in from the bottom and covers the screen.
👉 The Tag
This tag, placed on a top-level app page, creates a page that slides in from the bottom and covers the screen.
📍 Where to add the tag: A top-level app page
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252FCg86ph24XSTdoxFPEL5H%252FScreen-Recording-2024-02-26-at-13.14.42.gif%3Falt%3Dmedia%26token%3D3155414b-f050-4c13-bd31-4ca85d5f7f8a&width=768&dpr=4&quality=100&sign=98da7f6f&sv=1)
🏷️ How to add the tag
On a blank app page, create a Modal page design.
Use the tag that you prefer the most for modal page.
Types of modal pages
Page modal 100%
This modal will always be 100% of the mobile screen and this is a fix modal. Use this tag:
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252F8jBUZycy1zOdUMPZR9Ne%252FModal%2520pages2.jpg%3Falt%3Dmedia%26token%3D038ec099-9647-4777-a278-fb36fe73b577&width=768&dpr=4&quality=100&sign=53f2772d&sv=1)
Page modal % Size
Define the percentage number of the screen that your modal will shown up. Could be scrollable! Make it as long as you want. Several samples here:
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252FobYeRTmI8mpYyDArOs9d%252FModal%2520pages3.jpg%3Falt%3Dmedia%26token%3D00445871-2973-4605-988e-eeb00417dae1&width=768&dpr=4&quality=100&sign=10e7bb2d&sv=1)
Page Modal Fixed Size
Add the following tag in case you want the modal to be fixed:
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252FkZvc3HM66rxzuD9fAfiL%252FModal%2520pages4.jpg%3Falt%3Dmedia%26token%3D9876980d-18c5-4c6c-bec9-f1b82e38e4ca&width=768&dpr=4&quality=100&sign=f82a593d&sv=1)
iOs Cards Modal Type
This type of Modals are just working in iOs. This will be a 100% screen modal and scrollable! Add this tag:
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252FClNy9WaDSd3hXN2J5Pxy%252FModal%2520pages5.jpg%3Falt%3Dmedia%26token%3D31fa6957-a6ca-4272-bd41-bf7f3a369e29&width=768&dpr=4&quality=100&sign=c9953878&sv=1)
🔥 Important: Noticed that for the experience you will close them with a swipe down.
Now you can do the prototyping! Import to Bravo & preview on Bravo Vision 🚀
![](https://docs.bravostudio.app/~gitbook/image?url=https%3A%2F%2F1444025092-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MXpqEanvOhm8vMtIH8i%252Fuploads%252FYeTqXood5O8EwiacdSCV%252FModal%2520pages6.jpg%3Falt%3Dmedia%26token%3D5b55b7ea-5b99-4fe1-94b8-1a204545ce29&width=768&dpr=4&quality=100&sign=eb7c952b&sv=1)
💾 Example files
Duplicate the files below to see how to set it up!
Last updated