Porsche Design System

Modal

Table of Contents

Scrollable modal with sticky footer
Modal as alert dialog
Custom styling

If the modal's content does not fit into the current boundaries the content becomes scrollable and the footer area sticky.

Open Modal

Some Heading

Some Content Begin

Some Content End

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 Begin
  </p-text>
  <div class="w-[10px] h-[120vh] bg-[deeppink]"></div>
  <p-text>
    Some Content End
  </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>

The p-modal component can be used as an alert dialog. This is a modal dialog that interrupts the user's workflow to draw attention to an important message and requires a response.

Open Modal

Some important Heading

Some important Content

Deny

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="{'role': 'alertdialog'}" disable-backdrop-click="true">
  <p-heading slot="header" size="large" tag="h2">
    Some important Heading
  </p-heading>
  <p-text>
    Some important Content
  </p-text>
  <p-button-group slot="footer">
    <p-button type="button">
      Accept
    </p-button>
    <p-button type="button" variant="secondary">
      Deny
    </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>

Custom styling#

The modal component has some values which can be overwritten by CSS Custom Properties (aka CSS Variables). This might be useful for e.g. a "Cookie Consent Dialog" to reserve certain space when used with backdrop: 'shading' to always have the Porsche crest or wordmark visible in the background of the page. Since the modal is centered within the viewport and shrinks to its content, the custom vertical spacing definition will act like a safe zone.

In addition, it's possible to make containers or elements (e.g. div, img etc.) stretch into the padding safe-zone by adding the CSS class.

// the modal comes with predefined margin / safe-zone which needs to be considered when a custom width is defined
--p-modal-width: clamp(276px, 45.25vw + 131px, 1000px);
--p-modal-spacing-top: 200px;
--p-modal-spacing-bottom: 50px;

Open Modal

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 backdrop="shading" aria="{'aria-label': 'Some Label'}" class="[--p-modal-width:clamp(276px,45.25vw+131px,1000px)] [--p-modal-spacing-top:200px] [--p-modal-spacing-bottom:50px]">
  <img src="assets/porsche-992-carrera-s.jpg" class="stretch-to-full-modal-width max-w-none" />
</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>