Modals

All modals are being converted to a newer markup that uses the HTML5 dialog element: <dialog class="pat-modal">. Updated modals can be recognised by this element. The template layout is /_layouts/patterns/modal.html. Modal instances are configured in the front matter of each modal page. If an action is defined in the front matter, the modal will automatically receive a form element carrying that action. The inject statement is also defined on the modal, as are any buttons it contains. Since there can never be more than one modal on a page, IDs are largely irrelevant.

Examples

• A typical modern modal with a form on it: https://proto.quaivecloud.com/apps/assessments/panel-new-tool
• A modern modal that runs a multi step wizard: https://proto.quaivecloud.com/apps/todo/new-task
• A more rare ‘fancy’ modal with bespoke styling: https://proto.quaivecloud.com/apps/image-bank/collections/orange-inspiration/bulbs