Home
Components
Modals

Modals

The modal makes use of the HTML dialog element, which includes a lot of functionality that previously required a lot of additional CSS and JavaScript.

Give the dialog element an id so that any button can add a showModal function on click to open the modal.

To close a modal, enclose a button in a form element with the method attribute set to dialog.

Use the custom property --max-width to set the maximum width of the modal, or you can use pre-defined modal sizes. Use --max-height to set the maximum height of a modal. Modals must have a --max-height set to vertically scroll upon content overflow.

Using the --top custom property will set the position from the top of the viewport.

Custom Property	Default Value	Description
`--max-height`	auto	The maximum height of the modal
`--max-width`	100%	The maximum width of the modal
`--top`	2rem	Position from the top of the viewport

Example
A button that opens a small modal.

HTML

<button class="pv-button-primary" onclick="showDialog()">Open Modal</button>

<dialog class="pv-modal-sm pv-inset-square-24 pv-flow" id="dialog" style="--max-height: 400px;">
  <form method="dialog" style="position: absolute; top: 1rem; right: 1rem;">
    <button class="pv-button-icon pv-text-subdued">
      <svg aria-hidden="true" class="pv-icon-24">
        <title>close</title>
        <use xlink:href="#close"></use>
      </svg>
    </button>
  </form>

  <p class="pv-heading-3">Do you want to manage your presence on the Turquoise platform?</p>
  <p>Manage Storefront is our application to help Turquoise Verified organizations stand out from the rest of the crowd. Market yourself to purchasers and providers alike, upload your organization’s logo and create custom service categories all in one place. Your profile customization will appear on our public website as well as Care Search.</p>

  <p>If you’re interested in driving patient volume and expanding your market footprint, get in touch with a member of our team to be onboarded. If you’d like to learn more, follow the link below.</p>

  <form method="dialog" class="pv-flex" style="--flex-justify: flex-end">
    <button type="button" class="pv-button-primary">Get in touch</button>
  </form>
</dialog>

<script>
  function showDialog() {
    let dialog = document.getElementById('dialog');
    dialog.showModal();
  }
</script>

Use the following classes to set a specific max-width on the modal.

Class	Size
`.pv-modal-sm`	480px
`.pv-modal-md`	720px