Modal

Helper required

This component requires a helper. Make sure to read the documentation carefully so you know how to use it.

A dropdown component that takes care of all the annoying bits for you, with added support for programmatic triggers on top.

Usage

'Read the “', Usage, '” section'

Preview

Header Content

Modal Content

Trigger Modal

Code

ModalExample.astro

---
import { Modal, Button } from 'studiocms:ui/components';
---

<Modal id='modal'>
  <h2 slot='header'>Header Content</h2>
  <div>Modal Content</div>
</Modal>
<Button color='primary' id='modal-trigger'>
  Trigger Modal
</Button>

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

Size

'Read the “', Size, '” section'

You can change the modal’s size to one of three presets.

Preview

Small Modal

Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.

Medium Content

Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.

Large Content

Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.

Small

Medium

Large

Code

ModalSizesExample.astro

---
import { Modal, Button } from 'studiocms:ui/components';
---

<Modal id='modal' size='sm'>
  <h2 slot='header'>Small Modal</h2>
  <div>
    Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit
    nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum
    aliquam nam consectetur dolorum et unde optio At delectus alias.
  </div>
</Modal>
<Button color='primary' id='modal-trigger'>
  Small
</Button>

<!-- Other modals and triggers omitted for simplicity -->

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

Dismissable

'Read the “', Dismissable, '” section'

You can change whether a modal can be dismissed by clicking outside of it via the dismissable prop.

Preview

Non-dismissable

Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.

Non-Dismissable

Code

ModalDismissableExample.astro

---
import { Modal, Button } from 'studiocms:ui/components';
---

<Modal id='modal' dismissable={false}>
  <h2 slot='header'>Non-dismissable</h2>
  <div>
    Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit
    nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum
    aliquam nam consectetur dolorum et unde optio At delectus alias.
  </div>
</Modal>
<Button color='primary' id='modal-trigger'>
  Non-Dismissable
</Button>

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

If a modal has buttons (see below), the x button in the top right corner will disappear as well.

Buttons

'Read the “', Buttons, '” section'

Modals support both a “cancel” and a “confirm” button.

Preview

Buttons

Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum aliquam nam consectetur dolorum et unde optio At delectus alias.

Cancel Confirm

Buttons

Code

ModalButtonsExample.astro

---
import { Modal, Button } from 'studiocms:ui/components';
---

<Modal id='modal' cancelButton='Cancel' actionButton='Confirm'>
  <h2 slot='header'>Buttons</h2>
  <div>
    Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit
    nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum
    aliquam nam consectetur dolorum et unde optio At delectus alias.
  </div>
</Modal>
<Button color='primary' id='modal-trigger'>
  Buttons
</Button>

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

If you want to, instead of passing the label as a string to the prop, you can instead pass an object with the label and color keys defined to change the way the buttons look:

ModalButtonsExample.astro

---
import { Modal, Button } from 'studiocms:ui/components';
---

<Modal
  id='modal'
  cancelButton={{ label: 'Cancel', color: 'default' }}
  actionButton={{ label: 'Confirm', color: 'danger' }}
>
  <h2 slot='header'>Buttons</h2>
  <div>
    Lorem ipsum dolor sit amet. Est corporis rerum est reprehenderit
    nesciunt qui quibusdam quam non totam quia. Et porro unde et rerum
    aliquam nam consectetur dolorum et unde optio At delectus alias.
  </div>
</Modal>
<Button color='primary' id='modal-trigger'>
  Buttons
</Button>

Registering Callbacks

'Read the “', Registering Callbacks, '” section'

If you want to implement functionality based on which of the buttons is clicked, you can register a callback on each of them.

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

modal.registerCancelCallback(() => {
  // Your logic here
});

modal.registerConfirmCallback(() => {
  // Your logic here
});

Form Support

'Read the “', Form Support, '” section'

You can turn your modals into forms by supplying the isForm prop! This turns the Cancel button into a reset button and the Confirm button into a submission button. This only changes their types, not their text.

By using the registerConfirmCallback function, you can retrieve the FormData after the Confirm button is clicked. Any inputs in the modal will be included.

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

modal.registerConfirmCallback((formData) => {
  // Your logic here
});

Binding Triggers

'Read the “', Binding Triggers, '” section'

You can add multiple triggers to your modal by using the bindTrigger function in combination with an element’s ID.

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');
modal.bindTrigger('modal-trigger-two');
modal.bindTrigger('modal-trigger-three');

Controlling Modals Programatically

'Read the “', Controlling Modals Programatically, '” section'

Similar to dropdowns, modals can be shown and hidden programatically:

Script Tag

import { ModalHelper } from 'studiocms:ui/components';

const modal = new ModalHelper('modal', 'modal-trigger');

modal.show();
modal.hide();