Skip to content
Waitwhile Embed

Modal Reference

Configuration options

The modal uses the same interface for configuration options as the inline embed.

You can pass modal options as the 2nd param to the Waitwhile.Modal initialize call:

const configurationOptions = { ... };
const modalOptions = { ... };
const { dialog, instance } = Waitwhile.Modal(configurationOptions, modalOptions);

Below are all the available options.

id

type: string

Explicitly set the ID of the modal. If not set, it will be generated automatically.

confirmClose

type: boolean
default: true

Decides whether to confirm before closing the modal.

confirmMessage

type: string
default: Are you sure you want to close?

The message shown in the confirmation dialog when closing, with confirmClose enabled.

preload

type: boolean
default: false

Preloads Waitwhile in the background, even if the modal dialog isn’t triggered.

includeStyles

type: boolean
default: true

Injects lightweight stylesheets to enhance the modal’s appearance.

Show the default styles
@keyframes ww-modal-in {
  from {
    transform: translateY(1vh) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}


@keyframes ww-modal-o-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


body.${MODAL_OPEN_CLASS} {
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: none;
}


.waitwhile-modal {
  pointer-events: all;
  position: fixed;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: none;
  margin: 0;
  padding: 0 16px;
  transform: translateY(1vh) scale(0.98);
  opacity: 0;
  background: transparent;
}
.waitwhile-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.35rem);
  overflow: scroll;
}
.waitwhile-modal[open] {
  animation: ww-modal-in 350ms ease-out forwards;
  animation-delay: 150ms;
}
.waitwhile-modal[open]::backdrop {
  animation: ww-modal-o-in 250ms ease-out;
}


.waitwhile-modal-content {
  margin: 5% auto;
  margin: 5vh auto;
  padding: 16px 16px 48px 16px;
  width: 100%;
  max-width: 771px;
  min-height: 400px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
}

modalOpenClass

type: string
default: waitwhile-modal-open

A class name that is applied to the <body> tag when the modal is opened, useful for actions like disabling scrolling.

Dialog

show()

type: () => void

Opens the modal and loads Waitwhile. Use the preload option to load Waitwhile in the background.

close()

type: () => void

Closes the modal.

Component instance

The modal uses the same interface for the component instance as the inline embed.