# Modal Windows

Open a modal window in response to a user action, such as clicking a button or link. The modal blocks interaction with everything else on the page until the user acts upon or dismisses the modal.

The `lightning/modal` module provides the `LightningModal` component to create a modal window that overlays the current window.

`LightningModal` implements the [SLDS modals blueprint](https://www.lightningdesignsystem.com/components/modals/).

Unlike most base components, when you use this component you don’t add a `<lightning-modal>` tag to your component template or extend `LightningElement`. There is no `lightning-modal` component. Instead, you create a modal by extending `LightningModal`.

The `LightningModal` component provides helper components for specifying the modal content. Use the required `lightning-modal-body` component to provide the main content displayed in the modal. Use the optional `lightning-modal-header` component to add a title to the top of the modal, and the optional `lightning-modal-footer` component to add a footer to the bottom.

## Create a Modal

To create a modal component, import `LightningModal` from `lightning/modal`. Don’t import from `LightningElement`.The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the `lightning/modal` module.

Let’s create a simple modal called `myModal` that looks like this.

![The modal dialog myModal](https://a.sfdcstatic.com/developer-website/sfdocs/lwc/media/use_dialog_modal_mymodal.png "myModal component")

Here’s the JavaScript for `myModal`. It imports only `api`, not `LightningElement`, from `lwc`. Instead, it imports `LightningModal` and extends `LightningModal` to its own class. It defines an `options` array to accept content that’s provided when the modal is opened by another component. The `handleOptionClick` function handles button clicks in the modal. When the user clicks the Option 1 or Option 2 button, `this.close(id)` returns the option that they chose and the modal closes.

```javascript
/* c/myModal.js */

import { api } from "lwc";
import LightningModal from "lightning/modal";

export default class MyModal extends LightningModal {
  // Data is passed to apis via .open({ options: [] })
  @api options = [];

  handleOptionClick(e) {
    const { target } = e;
    const { id } = target.dataset;
    // this.close() triggers closing the modal
    // the value of `id` is passed as the result
    this.close(id);
  }
}
```

Here’s the `myModal.html` template, which includes a header and the modal body.

```html
<!-- c/myModal.html -->
<template>
  <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
  <lightning-modal-body>
    Let's make some buttons! <br />
    <template for:each={options} for:item="option">
      <lightning-button
        onclick={handleOptionClick}
        data-id={option.id}
        key={option.id}
        label={option.label}
      >
      </lightning-button>
    </template>
  </lightning-modal-body>
</template>
```

## Open a Modal Window

Here’s a component `myApp` that opens the `myModal` component when you click the **Open My Modal** button. It displays the result returned when the modal’s Option 1 or Option 2 buttons are clicked.

![myApp Component](https://a.sfdcstatic.com/developer-website/sfdocs/lwc/media/use_dialog_modal_myapp.png "myApp component")

Here’s the `myApp` template.

```html
<!-- c/myApp.html -->
<template>
  <lightning-button 
      onclick={handleOpenClick} 
      aria-haspopup="dialog" 
      label="Open My Modal">
  </lightning-button>
  <p>Result: {result}</p>
</template>
```

The component `myApp.js` imports `MyModal` from the `myModal` component. The button handler opens the `myModal` component using the component’s `open` method and provides data to be used in the modal’s `options` property.

```javascript
/* c/myApp.js */

import { LightningElement } from "lwc";
import MyModal from "c/myModal";

export default class MyApp extends LightningElement {
  result;
  async handleOpenClick() {
    this.result = await MyModal.open({
      // maps to developer-created `@api options`
      options: [
        { id: 1, label: "Option 1" },
        { id: 2, label: "Option 2" },
      ],
    });
    console.log(this.result);
  }
}
```

The `result` value is returned from `MyModal` and displayed by the `myApp` component.

For more details about using `LightningModal`, see the [Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal).

:::tip
The [lwc-recipes](https://github.com/trailheadapps/lwc-recipes) repo has `miscModal` and `myModal` components that demonstrate the use of `LightningModal`.
:::

**See Also**

- [Component Reference: `lightning-modal-body`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-body)
- [Component Reference: `lightning-modal-header`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-header)
- [Component Reference: `lightning-modal-footer`](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-modal-footer)