{modal} · PAD tags

Syntax

{modal 'name'} ... {/modal}
{modal 'name', title='Heading', button='Button text'} ... {/modal}

Parameters

name: Letters, digits, _ and -, at most 64. The dialog's id is pad-modal-<name>.

Options

title: The heading of the dialog, which also names it for a screen reader. The button's text when not given.
button: The text of the button that opens the dialog, Open when not given.

Description

{modal} writes an HTML <dialog> holding its content, with the heading from title=, and a button that opens it. The content renders first; on the end walk the tag puts it in the dialog. The name is required and becomes the id pad-modal-<name>, so an address ending in #pad-modal-terms opens that dialog on arrival.

The button opens the dialog as a modal in the first way the browser can: the HTML invoker commands (commandfor, command="show-modal") where it has them; otherwise a small script, written once per page (with the CSP nonce when $padCsp asks for one), that calls showModal() and close(); and with scripting off a link to the dialog's id, shown by the CSS as an overlay with a close link back to the opener. Opened, the page behind is inert, the focus moves into the dialog and back to the button afterwards, and Escape, the close button or a click on the backdrop closes it.

title= heads and names the dialog; button= is the button text, Open by default; a dialog without a title takes the button text as its heading. A name that is not letters, digits, _ and - is an error under the strict check, as is a {modal} that never closes. The colours are --pad-modal-accent, -on, -text, -muted, -line, -surface and -backdrop on .pad-modal.

Examples

Terms in a dialog

A button that opens the terms of sale over the page.

Templateexamples/modal/1-terms.pad

<p>Your order: 1 × Aurora electric kettle, <strong>€ 79.00</strong></p>
{modal 'terms', title='Terms of sale', button='Read the terms'}
  <ol>
    <li>Prices include VAT; shipping is free above € 50.</li>
    <li>You may return an unused product within 30 days.</li>
  </ol>
{/modal}

Resultopen alone

Your order: 1 × Aurora electric kettle, € 79.00

Rendered content

The content is template - here a loop over the page's data - rendered before it goes into the dialog.

Templateexamples/modal/2-data.pad

{modal 'opening-hours', button='Opening hours'}
  <table>
    {hours}<tr><th>{$day}</th><td>{$open}</td></tr>{/hours}
  </table>
{/modal}

PHPexamples/modal/2-data.php

<?php

  $hours = [
    [ 'day' => 'Monday to Friday', 'open' => '09:00 - 18:00' ],
    [ 'day' => 'Saturday',         'open' => '10:00 - 16:00' ],
    [ 'day' => 'Sunday',           'open' => 'closed'        ] ];

?>