# Modal

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

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Modal block
  3. Click on the Cwicly Modal block to insert it into your page

# Modal Style

The Modal Style properties allow you to customise the look and feel of the modal window.

# Height

The Height property allows you to specify the height of the modal element itself.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Style panel
  5. Find the Height property
  6. Enter the desired value

# Width

The Width property allows you to specify the width of the modal element itself.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Style panel
  5. Find the Width property
  6. Enter the desired value

# Overlay Color

The Overlay Color property allows you to specify the color that will be applied to the overlay that covers the page content.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Style panel
  5. Find the O. Color property
  6. Open the color picker by clicking on the color circle
  7. Select your color in the color picker or click on a global color

# Align

The Align property allows you to specify the vertical position of the modal element inside your page.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Style panel
  5. Find the Align property
  6. Select the desired value (flex-start, center, flex-end, stretch, baseline)

# Justify

The Justify property allows you to specify the horizontal position of the modal element inside your page.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Style panel
  5. Find the Align property
  6. Select the desired value (flex-start, center, flex-end, space-between, space-around)

Flex-start The blocks are positioned at the start of the flexbox container. In the Modal context, this is the Top

Center The blocks are centered in the container.

Flex-end The blocks are positioned at the end of the flexbox container. TIn the Modal context, this is the Bottom

Stretch The blocks are stretched to fill the flexbox container.

Baseline The blocks are positioned vertically relative to the baseline of the text.

Space-between The remaining space is distributed between the flexbox blocks.

Space-around The remaining space is distributed around the flexbox blocks: this adds space before the first item and after the last one.

# Modal Settings

The Modal Settings properties allow you to customise the interactions users can have with the Modal.

# Close on Overlay

When activated, the Close on Overlay property allows the user to click on the modal overlay to close the modal.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Settings panel
  5. Find the Close on Overlay property
  6. Toggle the Close on Overlay property

# Disable Page Scroll

When activated, the Disable Page Scroll property allows the you to disable scrolling on the page when the modal is open.

  1. Select a Modal block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Modal Settings panel
  5. Find the Disable Page Scroll property
  6. Toggle the Disable Page Scroll property