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 rightOpen draggable modalOpen draggable and resizable modal

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.

Draggable modal

This modal can be dragged.

Resizable modal

This modal can be resized by dragging the edges or corners. Clicking the edges expands it to the edge of the window.

Resizable modal

This modal can be dragged and resized by dragging the edges or corners. Clicking the edges expands it to the edge of the window.

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	default alert error success	The type of dialog, one of default, error or success or alert. Defaults to default. This changes the background color of the modal.	<rapid-modal type="success">
position	center left right	Determines the position of the modal. Defaults to center.	<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">
draggable	boolean	Enables dragging the modal. Defaults to 'false'.	<rapid-modal draggable="true">
resizable	boolean	Enables resizing the modal. Defaults to 'false'.	<rapid-modal resizable="true">
initial-width	number	Sets the initial width, in pixels, of the modal when it is first opened.	<rapid-modal initial-width="500">
initial-height	number	Sets the initial height, in pixels, of the modal when it is first opened.	<rapid-modal initial-height="400">
min-width	number	Sets the minimum width, in pixels, that the modal can be resized to. Only applies when resizable is set to true.	<rapid-modal resizable="true" min-width="300">
min-height	number	Sets the minimum height, in pixels, that the modal can be resized to. Only applies when resizable is set to true.	<rapid-modal resizable="true" min-height="200">

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

Event	Type	Description	Example
close	void	Fired when the dialog is closed, either through the close button, escape key, or programmatic close.	<rapid-modal @close="${(x) => x.handleDialogClose()}">

Events listened to

This component doesn't listen to any events.