# Modal
The `modal` block is a popup or dialog that appears over a page's content. It can be interacted with to exit it and return to the page.
## Basics
The `modal` block is essentially an overlay background and a `div` block.
The `modal` block will appear inline (beneath or above) when using the editor so that editing is easy and intuitive. On the front-end, the `modal` block will be rendered overlaying the other elements of the page.
To hide/reveal the `modal` block, simply toggle the "eye" icon in the Cwicly Navigator.
{% hint style="danger" %}
It is not advisable to add a `modal` block inside a parent block as this will create errors.
{% endhint %}
Add a modal
1. Click on the ➕ icon to open the Inserter Panel
2. Search for the `modal` block
3. Click on the `modal` block to insert it into your page
## Modal Menu
You need to add a Menu to your modal block before you style it.
With the Modal block selected, add a Menu from the Quick Inserter.
{% content-ref url="menu" %}
[menu](https://docs.cwicly.com/blocks/menu)
{% endcontent-ref %}
{% embed url="" %}
How to - Modal Pop Up
{% endembed %}
## Colours
The Modal Colours tab allows you to customise the text, links and background of your modal.
Modify colours
1. Click on the ➕ icon to open the Inserter Panel
2. Search for the `modal` block
3. Click on the `modal` block to insert it into your page
4. Find Colours Tab
5. Open to modify text, links and background colours
Reset colours
1. Click on the ➕ icon to open the Inserter Panel
2. Search for the `modal` block
3. Click on the `modal` block to insert it into your page
4. Find Colours Tab
5. Click dot(s) to reset modal colours
## Inner Layout
The Modal Inner Layout tab allows you to modify your modal inner layout and includes: display, direction, position, behaviour, text size, spacing.
Modify inner layout
1. Click on the ➕ icon to open the Inserter Panel
2. Search for the `modal` block
3. Click on the `modal` block to insert it into your page
4. Find Layout Tab
5. Open to modify inner layout (display, direction, position, behaviour, text size, spacing)
Reset inner layout
1. Click on the ➕ icon to open the Inserter Panel
2. Search for the `modal` block
3. Click on the `modal` block to insert it into your page
4. Find Layout Tab
5. Click dot(s) to reset
{% content-ref url="../design/layout" %}
[layout](https://docs.cwicly.com/design/layout)
{% endcontent-ref %}
## Modal Style
The Modal Style properties allow you to customise the look and feel of the modal window, for example: Overlay colour, Height, Width, Position.
{% content-ref url="modal/modal-style" %}
[modal-style](https://docs.cwicly.com/blocks/modal/modal-style)
{% endcontent-ref %}
## Settings
The Modal Settings properties allow you to customise the interactions users can have with the Modal.
{% content-ref url="modal/settings" %}
[settings](https://docs.cwicly.com/blocks/modal/settings)
{% endcontent-ref %}
## Trigger
The modal trigger tab allows you to set the modal's block trigger settings.
{% content-ref url="modal/trigger" %}
[trigger](https://docs.cwicly.com/blocks/modal/trigger)
{% endcontent-ref %}
## Animation
Animate the modal block's appearance and disappearance, with specific transition durations.
{% content-ref url="modal/animation" %}
[animation](https://docs.cwicly.com/blocks/modal/animation)
{% endcontent-ref %}
.png?alt=media&token=7217d37c-7da0-48b5-a775-e14b6e5de2f4)
`modal` block
3. Click on the 
