Modal

Modals are used to display content that temporarily blocks interactions with the main view of an application.

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" inline-size="s">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex.</p>
  </div>
</tw-modal>

<script>
  openModal = () => {
    document.getElementsByTagName('tw-modal')[0].open();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" inline-size="s">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex.</p>
  </div>
  <tw-button
    slot="actions"
    expand
    onclick="closeModal()"
  >Cancel</tw-button>
  <tw-button
    slot="actions"
    variant="primary"
    expand
  >Save</tw-button>
</tw-modal>

<script>
  const modal = document.getElementsByTagName('tw-modal')[0];
  openModal = () => {
    modal.open();
  }
  closeModal = () => {
    modal.close();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat" size="s">
  <tw-icon
    name="circle-check"
    size="xl"
    style="color: var(--tw-color-success)"
    slot="header-start"
  ></tw-icon>
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex.</p>
  </div>
  <tw-button
    slot="actions"
    expand onclick="closeModal('medium')"
  >Cancel</tw-button>
  <tw-button
    slot="actions"
    variant="primary"
    expand
  >Save</tw-button>
</tw-modal>

<script>
  const modal = document.getElementsByTagName('tw-modal')[0];
  openModal = () => {
    modal.open();
  }
  closeModal = () => {
    modal.close();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" inline-size="m">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex. Sit aliquip qui ad nulla officia sunt non dolore reprehenderit tempor veniam id pariatur. Est veniam laboris officia laboris enim adipisicing ea culpa consectetur ut. Excepteur irure anim laboris non dolore. Ut sit adipisicing nisi excepteur ut culpa elit. In veniam irure amet veniam ex. Magna minim laborum reprehenderit ad proident Lorem exercitation ad eiusmod eiusmod ex. Proident sit est id sunt.</p>
  </div>
</tw-modal>

<script>
  openModal = () => {
    document.getElementsByTagName('tw-modal')[0].open();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" inline-size="l">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex. Sit aliquip qui ad nulla officia sunt non dolore reprehenderit tempor veniam id pariatur. Est veniam laboris officia laboris enim adipisicing ea culpa consectetur ut. Excepteur irure anim laboris non dolore. Ut sit adipisicing nisi excepteur ut culpa elit. In veniam irure amet veniam ex. Magna minim laborum reprehenderit ad proident Lorem exercitation ad eiusmod eiusmod ex. Proident sit est id sunt.</p>
  </div>
</tw-modal>

<script>
  openModal = () => {
    document.getElementsByTagName('tw-modal')[0].open();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" block-size="100%" inline-size="100%">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex. Sit aliquip qui ad nulla officia sunt non dolore reprehenderit tempor veniam id pariatur. Est veniam laboris officia laboris enim adipisicing ea culpa consectetur ut. Excepteur irure anim laboris non dolore. Ut sit adipisicing nisi excepteur ut culpa elit. In veniam irure amet veniam ex. Magna minim laborum reprehenderit ad proident Lorem exercitation ad eiusmod eiusmod ex. Proident sit est id sunt.</p>
  </div>
</tw-modal>

<script>
  openModal = () => {
    document.getElementsByTagName('tw-modal')[0].open();
  }
</script>

<tw-button onclick="openModal()">Open</tw-button>

<tw-modal header-title="Minim occaecat ullam" size="s">
  <div class="tw-typeset">
    <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex.</p>
  </div>
  <tw-button
    slot="actions"
    expand
    onclick="confirmClose()"
  >Cancel</tw-button>
  <tw-button
    slot="actions"
    variant="primary"
    expand
  >Save</tw-button>
</tw-modal>

<script>
  const modal = document.getElementsByTagName('tw-modal')[0];
  openModal = () => {
    modal.open();
  }
  closeModal = () => {
    modal.close();
  }
  confirmClose = (id) => {
    const confirmClose = confirm(
      "Are you sure you want to close this modal?"
    );
    if (confirmClose) {
      closeModal(id);
    }
  }  
  modal.addEventListener('preclosed', (e) => {
    e.preventDefault();
    confirmClose();
  });
</script>

<tw-button onclick="openModal()">Open</tw-button>

<script>
  openModal = () => {
    document.body.innerHTML += `
    <tw-modal header-title="Minim occaecat ullam" inline-size="s" opened>
      <div class="tw-typeset">
        <p>Minim occaecat ullamco adipisicing occaecat voluptate consequat sunt dolore est nulla consectetur. Non tempor consectetur ea duis nostrud amet excepteur Lorem enim est elit. Fugiat consequat nisi pariatur id exercitation ex.</p>
      </div>
    </tw-modal>`;
  }
</script>

Properties

Property	Attribute	Description	Type	Default
`headerTitle`	`header-title`	The title displayed in the header of the modal.	`string \| undefined`	`undefined`
`inlineSize`	`inline-size`	The maximum inline size of the modal.	`"xs" \| "s" \| "m" \| "l" \| "xl" \| "100%"`	`"s"`
`blockSize`	`block-size`	The block size of the modal.	`"auto" \| "100%"`	`"auto"`
`opened`	`opened`	Whether the modal is open.	`boolean`	`false`
`scrollDisabled`	`scroll-disabled`	Disables the scrolling of the modal body.	`boolean`	`false`
`noPadding`	`no-padding`	Removes the padding in and around the modal body.	`boolean`	`false`
`hideModalClose`	`hide-modal-close`	Hides the modal close button.	`boolean`	`false`

Slots

Name	Description
Default	The body of the modal.
`header-start`	The slot to place content left to the header title. An icon, for instance.
`header-actions`	The slot to place actions in the header, right-aligned but to the left of the close button.
`actions`	The slot to place the actions of the modal. This is where you would put Cancel and Save, for intance.

Methods

Name	Description
`open`	Programmatically opens the modal.
`close`	Programmatically closes the modal.
`trapFocus`	Traps focus in the modal.

Events

Name	Description
`closed`	Dispatched whenever the modal is closed programmatically.
`preclosed`	Dispatched whenever the modal is going to close from within. The actual closing can be prevented by calling `preventDefault()` on this event.

CSS Properties

Property	Description	Default
`--tw-modal-max-inline-size`	The maximum inline size of the modal.	`620px`
`--tw-modal-max-block-size`	The block size of the modal.	`none`

Twikit

Twikit

Modal

Properties

Slots

Methods

Events

CSS Properties