Porsche Design System

Modal

The p-modal is a temporary overlay to focus the user's attention on one task while interactions with the underlying page are blocked. It is only used as highly disruptive modal notification to present important information until dismissed. Or as overlay to confirm critical user actions, such as confirming an irreversible choice. It should be used thoughtfully and sparingly.

It is a controlled component. This grants flexible control over the modal's behavior especially whether it should stay open after user interaction like submission of a form.

This component sets overflow: hidden on the body when opened in order to prevent background scrolling.
This doesn't work completely reliable under iOS but is the most stable solution.
Feel free to address this issue in an Open Source PR, if you can provide a better solution. Current implementation

Following web standards, the component uses the native <dialog /> element internally which ensures proper focus handling including a focus trap. In addition, it's rendered on the #top-layer which ensures the element to be on top of the page independent of where p-modal is placed in the DOM hierarchy (z-index is not relevant anymore and won't have any effect).

The most important property of p-modal is its open property. When it's set to true the modal will be visible. In order to get notified when the modal gets closed by clicking the x button, the backdrop or by pressing the Escape key you need to register an event listener for the dismiss event which is emitted by p-modal.

The size of p-modal adjusts itself to the content with a predefined min/max width which aligns to the Porsche Grid.

Open Modal

Some Heading

Some Content

Proceed

Cancel

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-button type="button" aria="{'aria-haspopup': 'dialog'}">
  Open Modal
</p-button>

<p-modal aria="{'aria-label': 'Some Heading'}">
  <p-heading slot="header" size="large" tag="h2">
    Some Heading
  </p-heading>
  <p-text>
    Some Content
  </p-text>
  <p-button-group slot="footer">
    <p-button type="button">
      Proceed
    </p-button>
    <p-button type="button" variant="secondary">
      Cancel
    </p-button>
  </p-button-group>
</p-modal>
<script>
  const pButton = document.querySelector("p-button");
  const pModal = document.querySelector("p-modal");
  pButton.addEventListener('click', () => (pModal.open = true));
  pModal.addEventListener('dismiss', () => (pModal.open = false));
</script>
</body>
</html>

Scroll-lock