Modal

A modal is a type of dialog that prevents the user from interacting with other content on the page. Usually, when an active modal is displayed, all other content on the screen is dimmed. The user is unable to move focus to other windows or dialogs. This forces the user to deal with the modal before moving to other work on the application.

By default, the modal starts in a closed state.

Use cases:

• displaying content in a window over other main page content
• controlling user interactions
• submission confirmations
• alerting users
• requiring some user action before closing
• preventing interaction with content outside the modal

Example

Modal:

Open modalOpen modal with top slotOpen modal with bottom slotOpen modal positioned leftOpen modal positioned right

On show callback:

On close callback:

Modal example

Top slot

Modal example with top slotModal example with bottom slot

Slotted content in the bottom

This is a modal. It is positioned to the left.

This is a modal. It is positioned to the right.

Genesis

Declaration

<rapid-modal></rapid-modal>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <rapid-button @click=${x => x.modal.show()}>Open Modal</rapid-button>
        <rapid-modal
            ${ref('modal')}
            :onShowCallback=${x => x.showCallback}
            :onCloseCallback=${x => x.closeCallback}
        >
            <h3 slot="top">Top slot</h3>
            Main content in the modal
            <div slot="bottom">
                <i>Slotted content in the bottom</i>
            </div>
        </rapid-modal>
    `,
})
export class MyElement extends GenesisElement {
    modal: Modal
    showCallback() {
        console.log('modal shown');
    }
    closeCallback() {
        console.log('modal closed');
    }
}

React

Declaration

<rapid-modal></rapid-modal>

Usage

export function MyComponent() {
    const modalRef = useRef(null);

    useEffect(() => {
        if (modalRef.current) {
            modalRef.current.onShowCallback = () => console.log('modal shown')
            modalRef.current.onCloseCallback = () => console.log('modal closed')
        }
    })

    const handleClick = (ref) => {
        if (modalRef.current) {
            modalRef.current.show();
        }
    };

    return (
        <rapid-button onClick={() => handleClick()}>Open Modal</rapid-button>
        <rapid-modal
            ref={modalRef}
        >
            <h3 slot="top">Top slot</h3>
            Main content in the modal
            <div slot="bottom">
                <i>Slotted content in the bottom</i>
            </div>
        </rapid-modal>
    );
}

Angular

Usage

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';

@Component({
selector: 'modal-example',
template: `
  <rapid-button (click)="showModal()">Show modal</rapid-button>
  <rapid-modal #modal
  >
      <h3 slot="top">Top slot</h3>
      Main content in the modal
      <div slot="bottom">
          <i>Slotted content in the bottom</i>
      </div>
  </rapid-modal>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ModalExampleComponent implements AfterViewInit {
  @ViewChild('modal') modalRef!: ElementRef;

    ngAfterViewInit() {
        if (this.modalRef.nativeElement) {
            this.modalRef.nativeElement.onShowCallback = this.showCallback.bind(this);
            this.modalRef.nativeElement.onCloseCallback = this.closeCallback.bind(this);
        }
    }

    showModal() {
        if (this.modalRef.nativeElement) {
            this.modalRef.nativeElement.show()
        }
    }

    showCallback() {
        console.log('modal shown')
    }

    closeCallback() {
        console.log('modal close')
    }
}

DOM API

The sections below provide property and attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Attributes

Attribute	Type	Use	Example
type	string	The type of dialog on of default, alert or success. Defaults to default. This changes the styling depending on value.	<rapid-modal type="success">
position	string	Determines the position of the modal. Possible options 'right', 'left', 'center' or 'left'.	<rapid-modal position="right">
show-close-icon	boolean	Enables the close icon in the top right corner of the modal. Defaults to 'true'.	<rapid-modal show-close-icon="false">

note

If you set position to be left or right, the modal will assume height: 100% by default. To change this, make the appropriate css modifications.

Properties

Property	Type	Use	Example
onShowCallback	() => void	Function that runs before modal is opened.	<rapid-modal :onShowCallback="${() => () => console.log('shown')}">
onCloseCallback	() => void	Function that is called after the modal is closed.	<rapid-modal :onCloseCallback="${() => () => console.log('hide')}">

Component Methods

Method	Type	Use	Example
show	() => void	When called, shows the modal.	modal.show()
close	() => void	When called, closes the modal.	modal.close()

Slots

Slot	Use
Default	The default slot for the main content of the modal.
top	The header section at the top of the modal.
bottom	The footer section at the bottom of the modal.

Parts

Part	Use
dialog	The container element containing the modal dialog.
content	The content container element
top	The top part of the modal, which contains the modal dialog header.
close-icon	The close icon in the top right hand corner of the modal dialog.
bottom	The footer section of the modal dialog.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.